1、容量、重名、格式校验，三种校验不成功，不执行上传动作
2、编辑时
（1）、上传文件跟上次数量一致时候，检查是否有变化，如果有变化，执行组件submit；如果没有变化，执行编辑保存接口
（2）、上传文件跟上次数量不一致，检查是否有未上传的数据，如果有，执行组件submit，如果没有，执行编辑保存接口
3、上传的图片是通过上传接口返回路径，然后把路径作为参数传入保存接口中
<template>
<div class="main">
<el-dialog title="编辑" :visible.sync="editFlag">
<div class="pop-dialog">
<div>
<div class="input-tit">
<span style="color: red">*</span>
文件名称
</div>
<el-input
v-model.lazy="editData.name"
class="input-box"
maxlength="42"
placeholder="请输入"
></el-input>
</div>
<div style="margin-bottom: 12px">
<span style="color: red">*</span>
上传文件
</div>
<div class="tip-txt">注：单个文件大小不超过500MB</div>
<el-upload
ref="editUpload"
class="upload-file-edit"
drag
:action="uploadUrl"
:headers="headers"
:auto-upload="false"
:file-list="editFileList"
:on-success="editSuccess"
mutiple
accept=".rar,.zip,.doc,.docx,.jpg,.jpoeg,.png,.ppt,.pptx,.xls,.xlsx,.ofd,.rtf,.bmp,.mp4,.avi"
:on-remove="uploadRemoveEdit"
:on-change="uploadEditBefore"
>
<div class="upload-c">
<i ref="up" class="el-icon-upload-file"></i>
<div class="click-title">点击或者将文件拖拽到这里上传</div>
<div class="format">
支持扩展名：.rar .zip .doc .docx .pdf .jpg .jpeg .png .ppt .pptx
.xls .xlsx .ofd .rtf .bmp .mp4 .avi
</div>
</div>
</el-upload>
<el-button type="primary" @click="uploadFnEdit">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { addFile } from "@/api";
export default {
name: "addFile",
data() {
return {
editData: {},
editFileList: [], //初始化上传控件中的文件列表
editFlag: false,
uploadUrl: process.env.VUE_APP_BASE_API + "/FilePath/batchUpload", //返回的是带有唯一id
headers: {
devCode: "zhangsan",
},
fileReg:
/.(xls|xlsx|rar|zip|doc|docx|pdf|jpg|jpeg|png|ppt|pptx|xls|xlsx|ofd|rtf|bmp|mp4|avi)$/i,
fileListEdit: [], //编辑页面中需要上传的文件列表
lastSuccessNum: 0, //上次成功添加的个数
capacityErrorList: [], //文件容量过界的列表
formatErrorList: [], //文件格式错误的列表
sameNameList: [], //文件重名的列表
timer: null,
delay: 500,
imgBaseUrl: process.env.VUE_APP_BASE_API + "/FilePath/file?path=",
};
},
methods: {
open(row) {
let data = row;
let fileList = [];
if (Array.isArray(data.fileList)) {
data.fileList.forEach((item) => {
fileList.push({
attachmentName: item.attachmentName,
attachmentPath: item.attachmentPath,
objId: item.objId,
name: item.attachmentName,
url: this.imgBaseUrl + item.attachmentPath,
});
});
} else {
data.fileList = [];
}
this.fileListEdit = data.fileList;
this.editFileList = fileList;
this.editData = data;
this.editFlag = true;
this.formatErrorList = [];
this.capacityErrorList = [];
this.sameNameList = [];
this.lastSuccessNum = fileList.length;
},
showEdit() {
this.editFlag = true;
},
async sendEditSuccess() {
if (this.fileListEdit.length == 0) {
return this.$message({
type: "warning",
message: "请上传文件",
});
}
let params = {
fileList: this.fileListEdit,
objId: "",
fileAttachName: this.addForm.text,
};
try {
let res = await editFile(params);
if (res.code == 200) {
this.$message({
type: "success",
message: "添加成功",
});
this.editFlag = false;
}
} catch (err) {
console.log(err.message);
}
},
editSuccess(value, file, fileList) {
if (!value.success) {
file.status = "error";
file.name = `(上传失败)${file.name}`;
}
let _this = this;
if (fileList.every((it) => it.status == "success")) {
let isNext = true;
fileList.map((item) => {
if (item.response) {
if (item.response.code == 200) {
_this.fileListEdit.push(item.response.data[0]);
} else {
isNext = false;
}
}
});
if (isNext) {
this.sendEditSuccess();
}
} else {
fileList.map((item) => {
if (item.response) {
if (item.response.code == 200) {
_this.fileListEdit.push(item.response.data[0]);
}
}
});
}
},
uploadRemoveEdit(file, fileList) {
let objId = file.objId;
if (file.response) {
if (file.response.success) {
objId = file.response.data[0].objId;
}
}
this.fileListEdit = this.fileListEdit.filter(
(item) => item.objId != objId
);
this.lastSuccessNum = this.fileListEdit.length;
},
async uploadEditBefore(file, fileList) {
//获取初始添加文件个数
let uploadNUm = 0;
let uploadFile = document.getElementsByClassName("upload-file-edit");
if (uploadFile && uploadFile.length > 0) {
var upload = uploadFile[0].getElementsByTagName("input");
if (upload && upload.length && upload[0].files.length > 0) {
uploadNUm = upload[0].files.length;
}
}
if (fileList.length - this.lastSuccessNum == 1) {
this.capacityErrorList = [];
this.formatErrorList = [];
this.sameNameList = [];
}
if (file.status !== "ready") {
return;
}
if (file.size > 1024 * 1024 * 500) {
this.capacityErrorList.push(file.name);
}
let reg = this.fileReg;
if (!reg.test(file.name)) {
this.formatErrorList.push(file.name);
}
let findIndex = this.$refs.editUpload.uploadFiles.findIndex(
(item) => item.name == file.name
);
if (
findIndex > -1 &&
findindex < this.$refs.editUpload.uploadFiles.length - 1
) {
this.sameNameList.push(file.name);
}
if (file.name) {
//处理最后一个文件时候进行校验
if (uploadNUm == fileList.length - this.lastSuccessNum) {
//格式校验
let formatStr = this.formatErrorList.join(",");
if (formatStr) {
this.$refs.editUpload.uploadFile.splice(
this.lastSuccessNum,
uploadNUm
);
const h = this.$createElement;
this.$message({
type: "error",
duration: 2000,
message: h("p", [
h("span", null, "文件格式错误："),
h("i", { style: "color:red" }, `${formatStr}`),
]),
});
return false;
}
//容量校验
let capacityStr = this.capacityErrorList.join(",");
if (capacityStr) {
this.$refs.editUpload.uploadFile.splice(
this.lastSuccessNum,
uploadNUm
);
const h = this.$createElement;
this.$message({
type: "error",
duration: 2000,
message: h("p", [
h("span", null, "文件大小已超过500MB："),
h("i", { style: "color:red" }, `${capacityStr}`),
]),
});
return false;
}
//重命名校验
let sameStr = this.sameNameList.join(",");
if (sameStr) {
this.$refs.editUpload.uploadFile.splice(
this.lastSuccessNum,
uploadNUm
);
const h = this.$createElement;
this.$message({
type: "error",
duration: 2000,
message: h("p", [
h("span", null, "存在同名文件："),
h("i", { style: "color:red" }, `${sameStr}`),
]),
});
return false;
}
this.lastSuccessNum = fileList.length;
}
}
},
uploadFnEdit() {
let _this = this;
this.timer && clearTimeout(this.timer);
this.timer = setTimeout(() => {
let uploadFiles = this.$refs.editUpload.uploadFiles;
let isAllSuccess = true;
for (let i = 0; i < uploadFiles.length; i++) {
let item = uploadFiles[i];
if (item.status == "error") {
isAllSuccess = false;
break;
}
}
if (!isAllSuccess) {
return this.$message({
type: "warning",
message: "请上传正确文件",
});
}
if (this.addForm.text.length == 0) {
return this.$message({
type: "warning",
message: "请填写正确文件名称",
});
}
if (this.$refs.editUpload.uploadFiles.length == 0) {
return this.$message({
type: "warning",
message: "请上传文件",
});
}
let reg = /[^a-zA-Z0-9\u4E00-\u9FA5]/g;
if (
_this.fileListEdit.length == _this.$refs.editUpload.uploadFiles.length
) {
//数量一致，判断有没有替换修改
if (this.isSameNumAltered()) {
if (reg.test(this.editData.fileAttachName)) {
this.$message({
type: "error",
message: "文件名称不允许输入特殊字符或者空格",
});
} else {
this.$refs.editUpload.submit();
}
} else {
if (reg.test(this.editData.fileAttachName)) {
this.$message({
type: "error",
message: "文件名称不允许输入特殊字符或者空格",
});
} else {
this.sendEditSuccess();
}
}
} else {
//数量不一致，判断有没有未上传的数据
if (this.isHasUnuploadEdit()) {
if (reg.test(this.editData.fileAttachName)) {
this.$message({
type: "error",
message: "文件名称不允许输入特殊字符或者空格",
});
} else {
this.$refs.editUpload.submit();
}
} else {
if (reg.test(this.editData.fileAttachName)) {
this.$message({
type: "error",
message: "文件名称不允许输入特殊字符或者空格",
});
} else {
this.sendEditSuccess();
}
}
}
}, this.delay);
},
isSameNumAltered() {
//数量一致，判断有没有替换修改
let isChange = false;
let _this = this;
for (let i = 0; i < _this.fileListEdit.length; i++) {
let item = _this.$refs.editUpload.uploadFiles[i];
let objId = item.objId;
let index = _this.fileListEdit.findIndex((item) => item.objId == objId);
if (index == -1 && item.status == "ready") {
isChange = true;
break;
}
}
return isChange;
},
isHasUnuploadEdit() {
let isHasUnupload = false; //是否有上次未上传成功的文件
for (let k = 0; k < this.$refs.editUpload.uploadFiles.length; k++) {
let item = this.$refs.editUpload.uploadFiles[k];
if (!item.response && item.status == "ready") {
isHasUnupload = true;
break;
}
}
return isHasUnupload;
},
},
};
</script>
3862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
