Element UI上传图片和PDF，支持预览，并支持复制黏贴上传

 背景

  如上图，使用Element UI的el-upload组件，并且预览的时候可以展示图片和PDF格式文件；

 做法

  index.vue

  
    
      
        
        点击上传+拖拽上传
      
    
  

upload.js

// import request from '@/plugin/axios';
const host = require('../../host');
// 工单文件上传
export function workOrderUploadUlr(hostType = 'BASIC_GATE') {
  return host.getBaseUrl(hostType) + 'xxxxx/file/upload';
}

再次基础上，我们对上面代码进行改造，添加监听past事件

  
    
      
        
        点击上传+拖拽上传 + 复制黏贴 + 截图上传
      
    
  

auth.js

import request from '@/plugin/axios';
import {
  post,
} from '@/plugin/axios/helper.js';
import md5 from 'md5';

// 登录新
export function evaluateUpload(data = {}, token) {
  return request({
    url: '/file/workOrder/upload',
    method: 'post',
    useError: true,
    data: data,
    headers: { 'Content-Type': 'multipart/form-data', ...token },
    hostType: 'BASIC_GATE',
  });
}

这里主要需要再header中设置 ‘Content-Type’: ‘multipart/form-data’ 还有依赖的Token等字段内容。

效果展示

随便屏幕截图

然后 黏贴

发现图片已经上传到组件中了