elementui上传文件不允许重名的解决方案
作者：Violet_Stray
用户可以多文件上传 ,在上传到服务器之前需要检查服务器中有无重名的文件,如果有会返回重名文件的名称数组,这些文件需要一个一个的向用户确认是否要覆盖重传,这篇文章主要介绍了elementui上传文件不允许重名,需要的朋友可以参考下
elementui上传文件不允许重名
需求：
用户可以多文件上传 ，在上传到服务器之前需要检查服务器中有无重名的文件，如果有会返回重名文件的名称数组，这些文件需要一个一个的向用户确认是否要覆盖重传。确认完毕后再上传到服务器。
检查文件重名：
//上传文件
uploadFile() {
let _this = this;
// 未选择文件
if (_this.fileLength === 0) {
_this.$message({
message: '请先选择 [文件] 后在点击上传!',
type: 'warning'
});
return;
}
// 检查重名文件
let fileListForm = new FormData();
let noUploadFileList = []; //不覆盖上传的
const arrayList = _this.fileList.map(file => file.name);
console.log("将要上传的文件名:", arrayList);
arrayList.forEach(fileName => {
fileListForm.append("file_name", fileName);
});
let fileListConfig = {
method: 'post',
url: _this.checkFiles,
headers: {
"Content-Type": "multipart/form-data;charset=utf-8",
},
data: fileListForm
};
_this.$ajax(fileListConfig)
.then(async res => {
console.log("检查是否重复:", res.data);
let repeatArray = res.data; // 后端返回重复文件名数组
if (repeatArray.length > 0) {
for (const file of repeatArray) {
await _this.deleteRepeat(file, noUploadFileList);
}
}
console.log("noUploadFileList:", noUploadFileList);
//进行上传
//删除不覆盖上传的文件
_this.fileList = _this.fileList.filter(file => !noUploadFileList.includes(file.name));
console.log("新的上传列表：", _this.fileList);
_this.fileLength = _this.fileList.length;
if (_this.fileLength === 0) {
return;
}
//进行上传
await _this.performUpload();
})
.catch(err => {
console.log(err);
});
},异步函数，一个一个文件的确定用户哪些需要覆盖上传，
//file：重名文件
//noUploadFileList：不需要覆盖上传的文件名数组
async deleteRepeat(file, noUploadFileList) {
let _this = this;
try {
// 等待用户的确认
await _this.$confirm(file + '文件已上传至服务器, 是否覆盖上传?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
// 如果await下面的代码执行了，意味着用户确认覆盖
_this.$message({
type: 'success',
message: '覆盖文件成功!'
});
} catch (error) {
// 如果进入catch块，意味着用户点击了取消
_this.$message({
type: 'success',
message: '已取消文件覆盖!'
});
noUploadFileList.push(file);
}
},上传服务器：
performUpload() {
let _this = this;
// 配置请求的相关参数
//loading开启
_this.is_loading = true
//配置请求的相关参数
let formData = new FormData()
let config = {
method: 'post',
url: this.uploadUrl,
headers: {
"Content-Type": "multipart/form-data;charset=utf-8",
},
data: formData
}
console.log("正在上传：", _this.fileList);
//单个文件，可编辑作者和文件密级
if (_this.fileLength === 1) {
formData.append("file", _this.fileList[0].raw)
formData.append("author", _this.edit_author)
//默认编写人为空，密级为非密
if (_this.secret_level === '') {
_this.secret_level = 0
}
formData.append("confidentiality", _this.secret_level)
}
//多文件
if (_this.fileLength > 1) {
_this.fileList.forEach(file => {
formData.append("file", _this.fileList.raw)
formData.append("author", _this.edit_author)
formData.append("confidentiality", 0)
})
}
//请求后端
_this.$ajax(config)
.then(res => {
// console.log(res)
if (res) {
_this.is_loading = false
_this.is_done = true
if (_this.is_done) {
console.log("上传成功！！！！！");
_this.$message({
message: '上传成功',
type: 'success'
});
_this.fileList = []
_this.show = true
}
_this.edit_author = ''
_this.secret_level = ''
} else {
_this.is_loading = false
_this.$message.error('后台连接错误');
_this.fileList = []
console.log("res failed")
}
})
.catch(err => {
_this.is_loading = false
_this.$message.error('后台连接错误');
console.log(err)
})
},ELEMENT UI --UPLOAD组件，上传的文件名后缀重复问题
在使用Element UI 的Upload组件，发现上传的文件名后缀是重复的。（eg. test.pdf.pdf）
在检查了相关组件的使用，没有任何问题，最后发现是windows电脑自动会隐藏文件扩展名，导致用户以为文件没有扩展名，继续修改成带后缀的文件名导致。
可以点击文件--查看--勾选扩展名，既可避免此类错误发生。
到此这篇关于elementui上传文件不允许重名的文章就介绍到这了,更多相关elementui上传文件不允许重名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！