Upload 上传文件设置请求参数_upload配置参数-优快云博客

本文链接：https://blog.youkuaiyun.com/Cang_Ye/article/details/121921552

本文介绍了如何在表单中正确设置content-type为form-data，重点讲解了图片上传的步骤，包括使用Vue组件和FormData对象进行文件上传，以及处理上传前后状态和错误处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不同的数据类型需要设置不同的 content-type 在表单中进行上传的时候则需要设置 content-type:form-data

比方说上传图片：

<el-upload
   class="avatar-uploader"
   action=""
   accept="image/jpeg, image/png"
   :auto-upload="false"
   :show-file-list="false"
   :file-list="addDetaile.qrcodeImg"
   :on-change="uploadSectionFile"
  >
   <el-button slot="trigger" size="medium" type="primary"
    >上传</el-button
   >
   <el-button
     type="danger"
     size="medium"
     @click="removeImg('eq')"
     >删除</el-button
    >
    <p>建议上传200*200的图片</p>
 </el-upload>


    uploadSectionFile(file) {
      this.uploadImg(file, "eq");
    },
    uploadImg(file, status) {
      if (status == "tx") {
        this.addDetaile.coverImg = [file];
      } else {
        this.addDetaile.qrcodeImg = [file];
      }

      let param = new FormData();
      // 上传文件对象 名称file与后台控制器参数要一致
      param.append("file", file.raw);
      this.$http({
        headers: { "Content-Type": "multipart/form-data" },
        url: this.$http.adornUrl("/file/upload"),
        method: "post",
        data: param,
      }).then(({ data }) => {
        if (data && data.code === 200) {
          if (status == "tx") {
            this.coverImg = data.data; // 图片上传回显
          } else {
            this.qrcodeImg = data.data; // 图片上传回显
          }
        } else {
          this.$message({
            message: data.message,
            type: "error",
            duration: 1500,
          });
        }
      });
    },
    removeImg(str) {
      if (str == "tx") {
        this.coverImg = "";
      } else {
        this.qrcodeImg = "";
      }
    },