自己用的upload组件主要使用before-upload,http-request,on-remove事件,给组件加ref方便调用里面的方法。文件上传重点在于将file文件传给后端,而before-upload的参数就是可以获得file,http-request也可以,不过他的file文件还要从参数里面找,http-request之所以要用是因为 upload自带的actions属性我不需要,所以需要http-request这个来自定义上传的方式,不然会报错。on-remove事件主要用来当用户手动删除了文件列表后触发。
注意actions可以随便填,只要定义了http-request
例如 手动拖拽文件上传这个
<el-upload
class="upload-demo"
drag
action="123"
multiple
:before-upload="beforeUpload"
:http-request="uploadFile"
:on-remove="handleRemove"
ref="upload"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
</el-upload>
<el-button type="primary" size="mini" @click="uploadSubmit">提交</el-button>
在data中定义fileData保存多个文件,file保存单个文件,如果你是多文件就用fileData,单文件就用file,看你自己需要,二选一。下面的代码都是我单个文件和多个文件都写,看自己需要。
文件上传前 before-upload 参数就是上传的文件,每次上传文件前就会触发,如果是多文件上传,就将每次的file放进数组里面
beforeUpload(file) {
console.log(file);
this.fileData.push(file);
this.file = file;
},
http-request的方法 这里啥都不干,但要写,不然会报错(需要这个方法重定义上传方式,覆盖action),其实也可以在这里做 before-upload 的事,只不过因为他的参数不能直接获取file,我不喜欢。
uploadFile(row) {},
上传文件请求接口 点击上传按钮上传发送文件给后端 这里用的表单提交formData
uploadSubmit() {
if (this.fileData.length == 0) {
return this.$message.error("请上传至少一个文件");
}
const formData = new FormData();
// 多文件上传就用for循环,将每个文件push进后端需要的files字段
for (let item of this.fileData) {
formData.append("files", item);
}
// formData.append("file", this.file);单文件就直接给就行
//接口请求
this.$api.upload(formData).then(res => {
//成功后注意清空文件列表,这里调用的是upload的clearFiles方法,同时还要将文件清空,防止用户下次点,这些文件还在
this.$refs.upload.clearFiles();
this.file = "";
this.fileData = [];
});
},
文件移除时触发 on-remove的方法 注意参数file里面的row才是刚刚移除的文件哟
handleRemove(file) {
// console.log(file);
// console.log(this.fileData);
//多文件的就循环,把移除的文件从fileData中删除
for (let i in this.fileData) {
if (this.fileData[i] === file.raw) {
this.fileData.splice(i, 1);
}
}
//如果是单文件其实就把file=""就好啦
// this.file = "";
},