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

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

作者: _浅墨_ | 来源:发表于2021-10-14 17:22 被阅读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)=>{})
          }
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/aijuoltx.html