Vue ElementUI中Upload组件批量上传的实现代码

本文主要是介绍Vue ElementUI中Upload组件批量上传的实现代码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使...

ElementUI中Upload组件如何批量上传

首先就是upload组件

      <el-upload
        class="upload-demo"
        ref="uploadFile"
        name="filedatas"
        :headers="importHeaders"
        :action="uploadAdminHost"
        :auto-upload="false"
        multiple
      >
        <el-button slot="trigger" size="small" type="primary">选取博客文件</el-button>
        <el-button size="small" type="success" @click="submitUpload">提交到服务器</el-button>
      </el-upload>

然后是上传逻辑，首先获取到upload组件上的dom，然后获取文件，上传地址和数据

    // 文件上传
    submitUpload() {
      let {uploadFiles, action, data} = this.$refs.uploadFile      
      this.uploadFiles({
        uploadFiles,
        data,
        action,
        success: (response) => {
          console.log(response)
          // 上传成功后，将里面的内容删除
          this.$refs.uploadFile.clearFiles();
          this.$androidrefs.uploadPicture.clearFiles();
        },
        error: (error) => {
          console.log('失败了', error)
        }
      })
    },

下面封装了一个 uploadFiles 方法，这里uploadFiles 就可以是多文件，通过封装AJAX方式

    /**
     * 自定义上传文件
     * @param fileList python文件列表
     * @param data 上传时附带的额外参数
     * @param url 上传的URL地址
     * @param success 成功回调
     * @param error 失败回调
     */
    uploadFiles({uploadFiles, headers, data, action, success, error}) {
      let form = new FormData()
      // 文件对象
      uploadFiles.map(file => form.append("fiwww.chinasem.cnledatas", file.raw))
      // 附件参数
      for (let key in data) {
        form.append(key, data[key])
      }
      let xhr = new XMLHttpRequest()
      // 异步请求
      xhr.open("androidpost", action, true)
      // 设置请求头
dnRqwyC      xhr.setRequestHeader("Authorization", getToken());
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4){
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            success && success(xhr.responseText)
          } else {
            error && error(xhr.status)
          }
        }
      }
      xhr.send(form)
    }

最后后台接口，同时接受多个文件

    @PostMapping("/pictures")
    public Object uploadPics(HttpServletRequest request, List<MultipartFile> filedatas) {
          // 逻辑代码
	}

最后查看请求，会同时携带多个文件，并且返回多个上传成功的结果

到此这篇关于vue ElementUI中Upload组件如何批量上传的文章就介绍到这了,更多相关Vue ElementUI Upload组件批量上传内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程China编程(www.chinasem.cn)！

这篇关于Vue ElementUI中Upload组件批量上传的实现代码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！