vue + element实现多文件上传

vue多文件上传

项目前提：前后端分离，使用springcloud + vue + element-Ui完成多文件上传 在网关中做了token校验

401错误

出现的原因：后台网关做了全局过滤器，由于这个请求中没有携带导致的（可能是）

<el-upload
    :headers="MyHead" <!--这里是解决401的关键  设置上传的请求头部-->
    multiple 
    class="upload-demo"
    ref="upload"
    action="http://localhost:8200/api/file/fileUpload"  <!--这里是后台接口的地址-->
    :on-preview="handlePreview" 
    :on-remove="handleRemove"
    :on-success="handleAvatarSuccess" <!--这里是上传成功的回调函数-->
    :file-list="fileList" <!--上传的文件列表-->
    :limit="4" <!--限制个数-->
    :before-upload="beforeAvatarUpload"
    :auto-upload="true"> <!--是否自动上传-->
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
</el-upload>

computed:{
  MyHead: function () {
    return {token:window.localStorage.getItem("token")} // 给这个请求head中加入一个token
  }
}

在vue中computed是计算属性，主要作用是把数据存储到内存中，减少不必要的请求，还可以利用computed给子组件的data赋值。

这里实现的是选择完毕之后自动上传，所以我们需要用到上传成功的回调函数，取到我们需要的值

// 上传成功 回调
handleAvatarSuccess(res, file) {
  console.log(res.data.url);
  this.addGood.files.push(res.data.url);
}

files是个数组，多文件上传，由于未做处理，前台是循环调用后台的接口

后台： 使用MultipartFile对象接收

---

同时上传多个文件：

后台：