当前位置：首页 > news >正文

elementui上传文件不允许重名

news 来源：原创 2024/5/12 19:37:38

需求：
用户可以多文件上传，在上传到服务器之前需要检查服务器中有无重名的文件，如果有会返回重名文件的名称数组，这些文件需要一个一个的向用户确认是否要覆盖重传。确认完毕后再上传到服务器。

检查文件重名：

	//上传文件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 = trueif (_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)})},