ant 上传的基本使用

首先看接口文档需要什么参数，一定要用name:"file"指定好【name属性默认就是"file"】

 <a-upload
            v-decorator="['upload']"
            @change="handleChange"
            name="file"
            action="http://127.0.0.1:8888/api/private/v1/upload"
            :headers="requestHeaders"
            list-type="picture"
          >
            <a-button> <a-icon type="upload" /> Click to upload </a-button>
          </a-upload>

action指定上传路径，还要记得头部携带token值，也就是属性headers值为对象

   requestHeaders: { Authorization: window.localStorage.getItem("token") },

 当上传时会触发change事件：

ps:分别有上传中， 成功、失败等一些状态【点击上传后该事件不止触发一次】

 handleChange(info) {
      console.log(info)
      
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        console.log(info.file, info.fileList);
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },

如何接收 upload组件的参数，用于传给后端

  this.form.validateFields((v, val) => {
        if (v) return;
       //val.upload.fileList直接拿到上传了的列表，根据后台需要的数据格式，将对应的参数提取出来， 
        
        console.log(val.upload.fileList);
      });