elementui的el-upload组件真的很好用
可以上传图片，pdf，word文档，excel等文件，点击文件可以下载，若是文件类型是图片则在新窗口打开进行展示，可以上传单个文件或者多个文件，可以控制上传文件的数量，可以一次性选中多个文件进行批量上传，可以复制多个文件，进行批量黏贴上传，
上传一波效果图
<el-drawer title="修改申请" :visible.sync="showEdit" size="70%" @paste.native="pasteMe"
@closed="cancel()" :destroy-on-close="true" :lock-scroll="false" >
<el-upload id="upfile_loading" class="upload-demo" ref="upload" action="" :on-remove="handleRemove" accept="doc,docx,.csv,.xlsx,.xls,.zip,.rar,.png,.jpg,.pdf,.jpeg" :file-list="filelist" :http-request="uploadfile" :auto-upload="true" :limit="1" :on-exceed="handleExceed" list-type="text" :on-preview="downfile" >
<el-button slot="trigger" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">
只能上传文件(doc,docx,csv,xlsx,xls,zip,rar,png,jpg,pdf,jpeg)文件,不超过10MB,只允许上传一份文件
</div>
</el-upload>
el-drawer/>
一、上传文件
:http-request="uploadfile"
//自定义文件上传接口
uploadfile(fileObj) {
let formData = new FormData();
const loading = this.$loading({
lock: true,
text: "正在上传中，请耐心等待！",
target: document.querySelector("#upfile_loading"),
});
formData.set("file", fileObj.file);
//这里使用封装的上传文件的接口
this.$http
.post("upload/uploadFile", formData)
.then((res) => {
if (res.data.code == 0) {
//将上传的文件的name和url保存在数组filelist里面
this.filelist.push({
name: res.data.data.fileName,
url: res.data.data.filePath,
});
//将上传的文件的url保存在另一个数组newFiles里面
for(let i=0;i<this.filelist.length;i++){
this.newFiles[i]=this.filelist[i].url
}
//文件url转为字符串，赋值给form表单
this.editForm.file=this.newFiles.toString();
this.$message({
type: "success", message: res.data.msg });
loading.close();
} else {
this.$message.error(res.data.msg);
loading.close();
}
})
.catch((e) => {
this.$message.error(e.message);
});
},
二、对上传的文件进行移除
:on-remove="handleRemove"
//移除上传文件
handleRemove(file) {
//上传的文件都会有一个uid，可借此将删除文件的uid与文件数组进行比对
for(let i=0;i<this.filelist.length;i++){
if(file.uid===this.filelist[i].uid){
this.filelist.splice(i,1);
}
}
},
三、支持上传文件的类型
accept="doc,docx,.csv,.xlsx,.xls,.zip,.rar,.png,.jpg,.pdf,.jpeg"
四、是否支持多选
若是希望el-upload组件支持上传多个文件，可以加上 multiple 属性
multiple
五、对上传的文件数量进行限制
:limit="3"
比如附件最多只能上传3个，可以给el-upload添加 limit 属性
limit
上传的附件数量超过限制时的弹窗提示:on-exceed="handleExceed"
handleExceed() {
this.$message.warning("只能上传3个附件");
},
六、点击上传的文件进行下载
:on-preview="downfile"
//点击已上传文件下载
downfile(file){
if (file.url){
window.open(file.url)//若是文件类型为图片，则是新开一个窗口进行展示
}
},
七、ctrl+v黏贴上传文件
对el-drawer组件进行黏贴事件监听 @paste.native="pasteMe"
//监听附件黏贴上传
pasteMe(e){
var clipboardData = e.clipboardData; // IE
if (!clipboardData) {
//chrome
clipboardData = e.originalEvent.clipboardData;
}
var items='';
items = (e.clipboardData || window.clipboardData).items;
let file = null;
if (!items || items.length === 0) {
this.$message.error('当前浏览器不支持本地或请打开图片再复制');
return;
}
// 搜索剪切板items
for (let i = 0; i < items.length; i++) {
// if (items[i].type.indexOf('image') !== -1) {
//此行代码注释掉，可以上传所有类型的文件
file = items[i].getAsFile();
// break;
// }
}
let fileData={
};
fileData.file=file;
if(file){
//对复制黏贴的类型进行判断，若是非文件类型，比如复制黏贴的文字，则不会调用上传文件的函数
this.uploadfile(fileData);//再次调用上传文件的函数
}
},