系统的elementui 上传图片到oss服务器

基础的element ui upload

先从官网把基础的upload组件模块复制过来

						<el-upload
                            action="/api/td-szxc-material/aifacelib/upload"
                            :headers="headers"
                            :auto-upload="true"
                            list-type="picture-card"
                            :show-file-list="true"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            multiple
                            :limit="5"
                            :file-list="fileList"
                            :on-exceed="handleExceed"
                            >
                            <div slot="default" class="flex_c w100 h100">
                              <i class="el-icon-plus"></i>
                            </div>
                            <div slot="file" slot-scope="{file}" class="flex_c w100 h100">
                              <img
                                class="el-upload-list__item-thumbnail w100 h100"
                                :src="file.url" alt=""
                              >
                              <span class="el-upload-list__item-actions">
                                <span
                                  class="el-upload-list__item-preview"
                                  @click="handlePictureCardPreview(file)"
                                >
                                  <i class="el-icon-zoom-in"></i>
                                </span>
                                <span
                                  v-if="!disabled"
                                  class="el-upload-list__item-delete"
                                  @click="handleRemove(file)"
                                >
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
                            </div>
                          </el-upload>
                          <el-dialog :visible.sync="dialogVisible" :modal="false" :append-to-body="true" top="10vh">
                            <img width="100%" :src="dialogImageUrl" alt="">
                          </el-dialog>

<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    // 上传图片
    handleAvatarSuccess(response, file,fileList) {
      //等待所有文件都上传完成，这里注意fileList是所有的文件（包含已上传的）
      if(fileList.every(it => it.status == 'success')) {
        fileList.map(item => {
          //只push新上传的 （带有response）
          item.response && this.fileList.push({name:item.response.data.originalName,url:item.response.data.link});
        });
        setTimeout(()=>{
          this.$emit("input", this.fileList)
        })
      }
    },
    beforeAvatarUpload(file) {
    },

    handleRemove(file) {
      var fileList = JSON.parse(JSON.stringify(this.fileList));
      this.fileList.splice(fileList.findIndex(item=>item.name===file.name), 1)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    }
  }
action：后台oss上传文件的接口 我后台使用的是springboot。文件类型为Spring的MultipartFile可以直接使用。
:on-success:上传成功后的钩子函数。
multiple：支持多文件同事上传。
:limit="5"：限制上传文件数5个。
:file-list：上传文件的数组。
:on-exceed：超出文件个数后的回调函数。

当我把基础准备好以后上传文件发现后台接收不到文件并报错，请求未授权。

因为好像elementui这个文件上传请求是没有经过统一的请求js的，所以在请求头中没有携带认证信息。所以我把系统中的认证信息加到了headers中。就可以了

headers:{
        'Authorization':`Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`,
        'Blade-Auth':'bearer '+Cookies.get('xxxxxx'),
      },

文件可以上传到后台后我准备选择多个文件同事上传，又有一个问题。只能有一个文件被加入到fileList中。

因为我在上传结束的回调函数中给fileList复制然后保存。但是我发现多个文件同时上传回调函数却只执行了一次。后来我将fileList赋值的语句注释掉后发现可以正常执行多次回调函数。原来如果改变fileList值后后面的回调函数会无法执行。于是可以再三个都上传结束后再赋值。

 handleAvatarSuccess(response, file,fileList) {
      //等待所有文件都上传完成，这里注意fileList是所有的文件（包含已上传的）
      if(fileList.every(it => it.status == 'success')) {
        fileList.map(item => {
          //只push新上传的 （带有response）
          item.response && this.fileList.push({name:item.response.data.originalName,url:item.response.data.link});
        });
        setTimeout(()=>{
          this.$emit("input", this.fileList)
        })
      }
    },