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等字段内容。
效果展示
随便屏幕截图
然后 黏贴
发现图片已经上传到组件中了