2021/11/10 vue 图像上传 form-data

HTML

 <el-upload
            ref="upload"
            :limit="1"
            :on-exceed="limit"
            :on-remove="handleRemove"
            multiple
            action
            :before-upload="beforeUploadForm"
            :http-request="handleUploadForm"
            list-type="picture-card"
          >
            <i slot="default" class="el-icon-plus"></i>
</el-upload>

JS

 data() {
    return {
       formMaxSize: 10, // 上传文件大小
    };
  },

  methods: {
// 上传数量超过 最大数量时
    limit() {
      this.$confirm("超出提示!", "Error", {
        dangerouslyUseHTMLString: false,
        type: "error",
        center: true,
        showCancelButton: false,
        showConfirmButton: false,
      });
    },
//移除营业执照
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.$refs["upload"].clearFiles();
    },
//上传前验证
    beforeUploadForm(file) {
      // 验证文件大小
      if (file.size / 1024 / 1024 > this.formMaxSize) {
        this.$message({
          message: `Upload file size cannot exceed${this.formMaxSize}M!`,
          type: "warning",
        });
        return false;
      }
      // 验证文件类型
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension =
        testmsg === "jpg" ||
        testmsg === "jpeg" ||
        testmsg === "png" ||
        testmsg === "JPG" ||
        testmsg === "JPEG" ||
        testmsg === "PNG";
      if (!extension) {
        this.$message({
          message: "The uploaded file can only be in jpg / png / jpeg format!",
          type: "warning",
        });
        return extension;
      }
    },


}

let fd = new FormData();
        fd.append("file", 此处是文件.file); 
        this.$axios.post(url, fd).then(({ data }) => {
          console.log(data);
          if (data.code == "200") {
               
          } else {
            this.$confirm(data.message, "Error", {
              dangerouslyUseHTMLString: false,
              type: "error",
              center: true,
              showCancelButton: false,
              showConfirmButton: false,
            });
          }
        });