element的多檔案上傳

項目需求:

• 可上傳多個檔案
• 可删除
• 檔案過大時使用者輸入可上傳至其他網站,并将檔案名和位址上傳至本網站

問題點:

• 大檔案使用者輸入内容無法合并到已上傳檔案的清單進行展示
• 上傳多個大檔案位址時前面已上傳的大檔案會被改變
• 無法取消彈窗的代碼校驗

原因和解決方案

• 大檔案資訊填寫的之後可以将内容push到fileList, 并将值指派給對應字段
• 将對象push到數組, 是淺拷貝, 再次對對象進行指派時, 數組中push的元素會被改變,

  需要将淺拷貝改為深拷貝, 例如: push(JSON.parse(JSON.stringify(this.form)))

• 我原本是想在彈窗出現時取消校驗, 但是此時彈窗的DOM還未建立完成(可能是這個原因), 無法擷取Dom, 會報錯.

  可以在點選彈窗的确定, 資料校驗成功之後取消校驗

所有原因及解決方案都在代碼中有備注

element元件代碼

<el-upload
          class="upload-demo"
          :action="actionUrl"
          :on-success="handleAvatarSuccess2"
          :before-upload="beforeAvatarUpload2"
          multiple
          :limit="5"
          :on-exceed="handleExceed"
          :before-remove="beforeRemove"
          :on-remove="handleRemove"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">點選上傳</el-button>
          <div slot="tip" class="el-upload__tip">
<!--            <p v-for="(itm, idx) of formDate.appendixSaveRequests" :key="idx">{{ itm.fileName }}</p>-->
          </div>
        </el-upload>

    <!--     上傳大檔案附件時的彈窗-->
    <el-dialog title="提示" :visible.sync="dialogFormVisible">
      <p class="i-info">
        <!--        <i class="el-icon-warning"></i>-->
        如果您需要上傳的附件過大，可上傳至網盤，在此留下網盤位址</p>
      <el-form :model="form" :rules="formRule" ref="form">
        <el-form-item label="附件名稱" prop="fileName" :label-width="formLabelWidth">
          <el-input v-model="form.fileName" placeholder="請輸入附件名稱" autocomplete="off" />
        </el-form-item>
        <el-form-item label="附件位址" prop="fileUrl" :label-width="formLabelWidth">
          <el-input v-model="form.fileUrl" placeholder="例:http://***.com" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBigFile">确 定</el-button>
      </div>
    </el-dialog>
           

// js部分
data () {
    return {
      dialogFormVisible: false,
      form: { // 大檔案輸入的名稱和位址
        fileName: \'\',
        fileUrl: \'\',
      },
      fileList: [],
    }
},
methods: {
    // 添加大檔案
    addBigFile() {
      this.$refs.form.validate(valid => {
        // 驗證fileUrl位址和必填項非恐校驗
        var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
        var re=new RegExp(strRegex);
        if (valid && re.test(this.form.fileUrl)) {
          this.dialogFormVisible = false
          this.form.name = this.form.fileName
        // this.form和this.fileList裡的item都為對象類型, push相當于淺拷貝, 再次添加時this.form的值改變, 導緻this.fileList裡的值重複, 是以需要用深拷貝代替淺拷貝
          let form = JSON.parse(JSON.stringify(this.form))

            // 點選彈窗的确定時将彈窗中的内容push到fileList, 注意: push的字段名稱要和fileList原本的字段名稱一緻
          this.fileList.push(form)
          this.resetForm(\'form\')
        } else {
          this.$message.error(\'請輸入正确的附件位址\')
        }
      })
    },
    // 上傳之前
    beforeAvatarUpload2(file) {
      const sizeFlag = file.size / 1024 / 1024 < 10
      if (!sizeFlag) {
        console.log(this.fileList, \'=======\')
        this.dialogFormVisible = true
        this.form.fileName = \'\'
        this.form.fileUrl = \'\'
        this.form.isThirdpartyStorage = true
      }
      return sizeFlag
    },
    // 上傳成功
    handleAvatarSuccess2(res, row) {
      // console.log(res, row)
      if (res.code === 0) {
        // 下面為項目中上傳附件的字段, 可忽略
        this.formDate.appendixSaveRequests.push({
          fileName: row.name,
          name: row.name,
          fileUrl: res.data.url,
          isThirdpartyStorage: false
        })
      }
    },
    // 已删除
    handleRemove(file, fileList) {
      console.log(\'this.fileList=111111==\')
       // 編輯頁面删除時要将後端傳回的對應的字段内容删除
      this.formDate.appendixSaveRequests.map((item, index) => {
        if(item.uid === file.uid) {
          this.formDate.appendixSaveRequests.splice(index, 1)
        }
      })
    },
    // 達到限制數量
    handleExceed(files, fileList) {
      this.$message.warning(`目前限制選擇 5 個檔案，本次選擇了 ${files.length} 個檔案`)
    },
    // 删除之前
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${file.name}？`)
    }

}