使用elementui实现表单上传功能_elementUI实现自定义上传文件并携带参数

vue代码

ref="upload"

action="/api/iot/deviceInfo/uploadFiles"

:before-upload="beforeUploadHandle"

:on-success="handleSuccess"

:auto-upload="false"

multiple

:limit="2"

:on-exceed="handleExceed"

:file-list="fileList">

添加文档或视频

js代码

// 上传之前

beforeUploadHandle(file) {

// 校验格式

if (

file.type !== "video/mp4" &&

file.type !== "application/msword" &&

file.type !==

"application/vnd.openxmlformats-officedocument.wordprocessingml.document"

) {

this.$message.error("只支持.mp4、.doc、.docx文件！");

return false;

}

},

// 超出上传数量的时候调用

handleExceed(files, fileList) {

this.$message.warning(

`当前限制选择 2 个文件，本次选择了 ${files.length} 个文件，共选择了 ${

files.length + fileList.length

} 个文件`

);

},

// 手动上传

submitUpload() {

this.$refs.ruleForm.validate((valid) => {

if (valid) {

if (this.$refs.upload.uploadFiles.length <= 0) {

this.$message.warning("请选择上传的文档或视频");

return;

}

this.saveLoading = true;

// 新建formData对象

let formData = new FormData();

// 将上传的文件放进formData对象

this.$refs.upload.uploadFiles.forEach((file) => {

formData.append("file", file.raw);

});

// 携带其他参数

formData.append("articleTitle", this.form.articleTitle);

formData.append("category", this.form.category);

formData.append("author", this.form.author);

formData.append("keyword", this.form.keyword);

formData.append("unit", this.form.unit);

// 调用上传接口

uploadFile(formData)

.then((res) => {

if (res && res.code === 200) {

this.$message.success("保存成功");

} else {

this.$message.error(res.msg);

}

this.saveLoading = false;

this.queryRule();

})

.catch((err) => {

console.log(err);

});

this.dialogFormVisible = false;

this.isAdd = false;

}

});

},

使用this.$refs.upload.uploadFiles获取文件列表是因为通过绑定file-list经常获取不到对象列表，具体原因还不清楚