快捷導(dǎo)航

elementui上傳文件不允許重名的解決方案

更新時間：2024年02月06日 11:20:01 作者：Violet_Stray

用戶可以多文件上傳 ,在上傳到服務(wù)器之前需要檢查服務(wù)器中有無重名的文件,如果有會返回重名文件的名稱數(shù)組,這些文件需要一個一個的向用戶確認(rèn)是否要覆蓋重傳,這篇文章主要介紹了elementui上傳文件不允許重名,需要的朋友可以參考下

elementui上傳文件不允許重名

需求：
用戶可以多文件上傳，在上傳到服務(wù)器之前需要檢查服務(wù)器中有無重名的文件，如果有會返回重名文件的名稱數(shù)組，這些文件需要一個一個的向用戶確認(rèn)是否要覆蓋重傳。確認(rèn)完畢后再上傳到服務(wù)器。

檢查文件重名：

//上傳文件
    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("檢查是否重復(fù):", res.data);
          let repeatArray = res.data; // 后端返回重復(fù)文件名數(shù)組
          if (repeatArray.length > 0) {
            for (const file of repeatArray) {
              await _this.deleteRepeat(file, noUploadFileList);
            }
          }
          console.log("noUploadFileList:", noUploadFileList);
          //進(jìn)行上傳
          //刪除不覆蓋上傳的文件
          _this.fileList = _this.fileList.filter(file => !noUploadFileList.includes(file.name));
          console.log("新的上傳列表：", _this.fileList);
          _this.fileLength = _this.fileList.length;
          if (_this.fileLength === 0) {
            return;
          }
          //進(jìn)行上傳
          await _this.performUpload();
        })
        .catch(err => {
          console.log(err);
        });
    },

異步函數(shù)，一個一個文件的確定用戶哪些需要覆蓋上傳，

//file：重名文件
//noUploadFileList：不需要覆蓋上傳的文件名數(shù)組
	async deleteRepeat(file, noUploadFileList) {
      let _this = this;
      try {
        // 等待用戶的確認(rèn)
        await _this.$confirm(file + '文件已上傳至服務(wù)器, 是否覆蓋上傳?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        // 如果await下面的代碼執(zhí)行了，意味著用戶確認(rèn)覆蓋
        _this.$message({
          type: 'success',
          message: '覆蓋文件成功!'
        });
      } catch (error) {
        // 如果進(jìn)入catch塊，意味著用戶點擊了取消
        _this.$message({
          type: 'success',
          message: '已取消文件覆蓋!'
        });
        noUploadFileList.push(file);
      }
    },

上傳服務(wù)器：

performUpload() {
      let _this = this;
      // 配置請求的相關(guān)參數(shù)
      //loading開啟
      _this.is_loading = true
      //配置請求的相關(guān)參數(shù)
      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)
        //默認(rèn)編寫人為空，密級為非密
        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)
        })
    },