el-upload点击在线预览图片、el-image点击在线预览大图以及图片下载

您可以使用以下代码示例来实现通过点击el-upload上传组件上传的文件进行预览PDF和图像。 ``` <template> <el-upload class="upload-demo" action="/your-upload-api" :on-preview="handlePreview" :before-upload="beforeUpload" :file-list="fileList" :auto-upload="false" :multiple="true" list-type="picture-card"> <i class="el-icon-plus"></i> <div class="upload-text">点击上传</div> </el-upload> </template> <script> export default { data() { return { fileList: [], }; }, methods: { beforeUpload(file) { const isJPG = file.type === 'image/jpeg'; const isPNG = file.type === 'image/png'; const isPDF = file.type === 'application/pdf'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG && !isPNG && !isPDF) { this.$message.error('只能上传 JPG、PNG、PDF 格式的文件!'); return false; } if (!isLt2M) { this.$message.error('上传文件大小不能超过 2MB!'); return false; } return true; }, handlePreview(file) { if (file.type === 'application/pdf') { // 预览 PDF 文件 window.open(file.url); } else { // 预览图像文件 this.$viewer.show(file.url, { title: file.name, navbar: true, toolbar: { zoomIn: 4, zoomOut: 4, oneToOne: 4, reset: 4, prev: 0, play: { show: false, }, next: 0, rotateLeft: 0, rotateRight: 0, flipHorizontal: 0, flipVertical: 0, }, }); } }, }, }; </script> ``` 在上面的示例中，我们使用了element-ui的el-upload上传组件，并设置了上传文件的类型和大小限制。我们还绑定了before-upload和on-preview事件，处理上传和预览文件的逻辑。 在before-upload方法中，我们检查上传的文件类型和大小是否符合要求，并返回true或false。如果返回false，则不会上传文件。 在handlePreview方法中，我们根据文件类型分别处理预览PDF和图像文件的逻辑。对于PDF文件，我们使用window.open打开文件URL以进行预览。对于图像文件，我们使用$viewer插件打开文件URL以进行预览。您需要在项目中安装和导入此插件。