在Element Ui中支持从体系粘贴版中获取图片和PDF，Docx，Doc，PPT等文档

在上一篇中，我们单纯的实现了Ctrl + V实现从粘贴版中获取图片信息，但是点击上传的时间会有个bug，就是点击文件上传的时间，会出现一个bug，这篇，我们将在上一篇的根本上举行完满，并支持从粘贴版中获取文件内容，同时对上传文件的巨细举行判断，且支持PDF，Docx，Doc，PPT等文件举行上传。
实现步调

• 安装 Element UI
  确保你已经安装了 Element UI 并在项目中精确设置。
  
• 创建拖拽上传组件
  假设你已经有一个根本的拖拽上传组件，我们将在其根本上添加 Ctrl + V 功能。
  
• 监听粘贴事故
  我们须要在页面中监听 paste 事故，当用户按下 Ctrl + V 时，捕捉粘贴板中的文件数据。
  
• 处理处罚粘贴事故
  在捕捉到文件数据后，将其转换为 File 对象，并调用上传方法。
  

实当代码

1. <template>
2.   <div>
3.     <el-upload
4.       drag
5.       action="https://jsonplaceholder.typicode.com/posts/"
6.       :on-preview="handlePreview"
7.       :on-remove="handleRemove"
8.       :before-upload="beforeUpload"
9.       :on-success="handleSuccess"
10.       multiple
11.       ref="upload"
12.       :file-list="fileList"
13.     >
14.       <i class="el-icon-upload"></i>
15.       <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
16.       <div class="el-upload__tip" slot="tip">支持上传多种文件类型</div>
17.     </el-upload>
19.     <!-- 显示上传后的文件 -->
20.     <div v-for="(file, index) in fileList" :key="index" class="uploaded-file">
21.       <div v-if="isImage(file.name)">
22.         <img :src="file.url" alt="Uploaded Image" class="uploaded-image" />
23.         <el-button type="text" @click="removeFile(index)">移除</el-button>
24.       </div>
25.       <div v-else>
26.         <span>{{ file.name }}</span>
27.         <el-button type="text" @click="removeFile(index)">移除</el-button>
28.       </div>
29.     </div>
30.   </div>
31. </template>

复制代码

CSS

1. <style scoped>
2. .uploaded-file {
3.   margin-top: 10px;
4.   display: flex;
5.   align-items: center;
6. }
8. .uploaded-image {
9.   max-width: 100px;
10.   max-height: 100px;
11.   margin-right: 10px;
12. }
13. </style>

复制代码

JavaScript

1. <script>
2. import { Upload } from 'element-ui';
4. export default {
5.   name: 'DragUpload',
6.   data() {
7.     return {
8.       fileList: []
9.     };
10.   },
11.   methods: {
12.     handlePaste(event) {
13.       const items = event.clipboardData.items;
14.       for (let i = 0; i < items.length; i++) {
15.         const allowedTypes = [
16.           'image/jpeg', 'image/png',
17.           'application/pdf',
18.           'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // DOC, DOCX
19.           'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation' // PPT, PPTX
20.         ];
21.         if (allowedTypes.includes(items[i].type)) {
22.           const file = items[i].getAsFile();
23.           this.handleFile(file);
24.           break;
25.         }
26.       }
27.     },
28.     handleFile(file) {
29.       const reader = new FileReader();
30.       reader.onload = (e) => {
31.         this.fileList.push({
32.           name: file.name,
33.           url: e.target.result
34.         });
35.       };
36.       reader.readAsDataURL(file);
37.       this.$refs.upload.handleStart(file);
38.       this.$refs.upload.submit();
39.     },
40.     handlePreview(file) {
41.       console.log('Preview:', file);
42.     },
43.     handleRemove(file, fileList) {
44.       this.fileList = fileList;
45.     },
46.     beforeUpload(file) {
47.       const allowedTypes = [
48.         'image/jpeg', 'image/png',
49.         'application/pdf',
50.         'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // DOC, DOCX
51.         'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation' // PPT, PPTX
52.       ];
53.       const isAllowedType = allowedTypes.includes(file.type);
54.       const isLt500K = file.size / 1024 < 500;
56.       if (!isAllowedType) {
57.         this.$message.error('只能上传 JPG/PNG/PDF/DOC/DOCX/PPT/PPTX 格式的文件!');
58.       }
59.       if (!isLt500K) {
60.         this.$message.error('文件大小不能超过 500KB!');
61.       }
63.       return isAllowedType && isLt500K;
64.     },
65.     handleSuccess(response, file, fileList) {
66.       // 更新 fileList
67.       this.fileList = fileList.map(f => ({
68.         name: f.name,
69.         url: f.url || f.response.url // 假设服务器返回的响应中有 url 字段
70.       }));
71.     },
72.     removeFile(index) {
73.       this.fileList.splice(index, 1);
74.     },
75.     isImage(fileName) {
76.       return fileName.toLowerCase().endsWith('.jpg') || fileName.toLowerCase().endsWith('.png');
77.     }
78.   },
79.   mounted() {
80.     document.addEventListener('paste', this.handlePaste);
81.   },
82.   beforeDestroy() {
83.     document.removeEventListener('paste', this.handlePaste);
84.   }
85. };
86. </script>

复制代码

阐明

• HTML部分：
  

• 使用 el-upload 组件创建一个拖拽上传地域。
  
• 使用 v-for 循环遍历 fileList 数组，表现每个上传的文件。
  
• 假如文件是图片，表现图片预览和移除按钮。
  
• 假如文件不是图片，表现文件名和移除按钮。
  

• CSS部分：
  

• 添加了一些根本样式来美化上传后的文件表现。
  

• JavaScript部分：
  

• fileList 数据属性用于存储上传的文件列表。
  
• handlePaste 方法：捕捉粘贴事故，查抄粘贴板中的数据是否为支持的文件范例（图片、PDF、DOC、DOCX、PPT、PPTX），假如是，则调用 handleFile 方法。
  
• handleFile 方法：读取文件内容并将其添加到 fileList 中，同时触发上传。
  
• handleRemove 方法：更新 fileList 以反映文件的移除。
  
• beforeUpload 方法：查抄文件范例和巨细，确保只上传答应的文件范例。
  
• handleSuccess 方法：处理处罚文件上传乐成后的相应，并更新 fileList。
  
• removeFile 方法：从 fileList 中移除指定索引的文件。
  
• isImage 方法：判断文件名是否为图片文件。
  

实现结果截图如下：