vue el-upload组件文件上传(包含文件上传格式限制,大小限制,form表单数据上传)
·
1.template设置(核心:"auto-upload"为false;on-change获取文件流)
<el-upload
class="upload-demo"
action
accept=".doc,.docx,.pdf"
ref="upload"
:auto-upload="false"
:before-remove="beforeRemove"
:on-change="handleChange"
:on-exceed="handleExceed"
:limit="1"
:file-list="ruleForm.file"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
只能上传doc、docx、pdf文件
</div>
</el-upload>
2.methods设置(核心:accept是个纸老虎,骗人的,需要自己对文件格式进行判断)
// 获取文件
handleChange(file, fileList) {
let self = this;
if (file.size / (1024 * 1024) > 50) {
// 限制文件大小
self.$message.warning(`当前限制文件大小不能大于50M`);
self.file = "";
self.ruleForm.file = [];
return false;
}
let suffix = self.getFileType(file.name); //获取文件后缀名
let suffixArray = ["doc", "docx", "pdf"]; //限制的文件类型
if (suffixArray.indexOf(suffix) === -1) {
self.$message({
message: "文件格式错误",
type: "error",
duration: 2000
});
self.file = "";
self.ruleForm.file = [];
return false;
} else {
self.file = file.raw;
self.ruleForm.file = fileList;
}
},
getFileType(name) {
let startIndex = name.lastIndexOf(".");
if (startIndex !== -1) {
return name.slice(startIndex + 1).toLowerCase();
} else {
return "";
}
},
// 上传数量提示
handleExceed(files, fileList) {
// this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
this.$message.warning(`当前限制选择1个文件`);
},
// 移除文件提示
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`);
}
3.修改为form表单上传数据格式(核心:new FormData();form.append(field,val))
//上传
upload_plan() {
let self = this;
let form = new FormData();
form.append("proclaimName", self.ruleForm.proclaimName);
form.append("proclaimType", self.ruleForm.proclaimType);
form.append("proclaimContent", self.ruleForm.proclaimContent);
form.append("file", self.file);
axios
.post("/tpra/proclam/issue", form, {
headers: { "Content-Type": "multipart/form-data" }
})
.then((res) => {
self.file = "";
self.ruleForm = {
proclaimName: "",
proclaimType: "",
issuerTime: "",
proclaimContent: "",
attachmentName: "",
file: []
};
if (res.data.code == 200) {
self.$message.success("上传成功!");
} else {
self.$message.warning("上传失败!");
}
self.$router.push({
path: "/informationPublicity/informationPublicityList"
});
});
},
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)