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经常获取不到对象列表，具体原因还不清楚
