ant design vue 使用upload自定义方法实现图片文件上传

 定义方法使用封装好的接口去上传图片，不是官方那样直接写道标签里面上传地址。应为上传接口需要token验证。我也不知道标签里面怎么写可以将token传过去过去，所以在方法里面写了。

html：

<a-upload
                  name="avatar"
                  list-type="picture-card"
                  :before-upload="beforeUpload"
                  :customRequest="uploadImage"
                  :file-list="fileList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="fileList.length < 8">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">点击上传</div>
                  </div>
                </a-upload>
              </div>
              <a-modal
                :visible="previewVisible"
                :footer="null"
                @cancel="handleCancel"
              >
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>

js:

//该方法当上传列表新增上传和删除上传项都会执行，我们可以通过状态来获取最新的fileList内容，其中状/态有loading,removed,done。
    handleChange(data) {
      console.log(data);
      if (data.file.status == "removed") {
        this.fileList = data.fileList;
      }

      console.log(this.fileList);
    },
    // 上传头像前校验
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("只能上传jpg/png格式的图片");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("图片不得大于2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      console.log(file);
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    uploadImage(file) {
      this.loading = true;
      const formData = new FormData();
      formData.append("file", file.file);
      this.saveFile(formData);
    },
    saveFile(file) {
      this.$http
        .post("/file/upload", file)
        .then((res) => {
          console.log("图片上传成功", res);
          if (res.code == 1) {
            // 存入列表
            this.fileList.push({
              uid: this.fileList.length + 1,
              name: res.data.name,
              status: "done",
              url: "https://passport.xg360.cc/" + res.data.filePath,
            });
          } else {
            this.$message.error("图片要小于1M，请压缩后上传");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

效果图：

 总结：其实对接接口没那么顺利，后端写上传接口的大哥也是第一次写java，我是不确定到底给接口传什么值。最后确定了（下图），如果上传结果提示找不到某个文件夹（像upload/3465843758/...找不到，提示是英文的），这是后端的问题快速联系后端小哥就好了。