element-ui 多文件上传到服务器一次请求执行

2021-10-14  本文已影响0人  _浅墨_

默认上传事件会执行多次网络请求。修改下面方法,可将多次上传网络请求合并为一次上传网络请求:

 <el-form-item label="附件上传到服务器">
              <el-upload ref="redmineUpload" :file-list="field142fileList"
                         :multiple="true"
                         :limit="5"
                         :action="redmineUpload.url"
                         v-loading="redmineUpload.isUploading"
                         :on-change="handleChange"
                         :before-upload="field112BeforeUpload"
                         :auto-upload="false"
                         :on-progress="handleFileUploadProgress" 
                         :http-request="uploadFile" 
                         :show-file-list="true" 
                         :on-success="verificationSpecificationRedmineUpload">
                <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
              </el-upload>

            </el-form-item>



 // 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
      handleChange(file, fileList) {
        this.redmineUploadSelected = true;
        this.field142fileList = fileList
      },
      // 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除
      handleRemove(file, fileList) {
          this.field142fileList = fileList
      },
      // 上传文件
      uploadFile(file) {
      },
      /** 调用接口上传 */
      httpRequestConfirm() {
          this.loading = true;
          // 执行上传 redmine 事件
          const formData = new FormData()
          formData.append("instanceId", this.instanceId)
          formData.append("userId", this.username)
          this.field142fileList.forEach((file) => {
              formData.append('file', file.raw)
          })
          uploadRedmineFilesToRedmine(formData,this.instanceId,this.username).then(res => {
            this.loading = false;
            this.$refs.redmineUpload.clearFiles()
            this.msgSuccess("上传成功")
            this.$refs['elForm'].resetFields();
            this.$emit('attachmentuploadclose')
          }).catch((err)=>{})
      }
上一篇下一篇

猜你喜欢

热点阅读