post 上传文件new FormData（）

最新推荐文章于 2024-07-10 18:46:21 发布

北寂.

最新推荐文章于 2024-07-10 18:46:21 发布

阅读量937

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_45059900/article/details/126627770

版权

这篇博客介绍了如何使用HTML的ele-UI组件选择文件，并通过beforeUpload回调将文件添加到FormData对象中，以POST方式利用Postman进行接口测试。在上传过程中，限制了文件类型和数量，并提供了上传成功后的处理逻辑。

摘要由CSDN通过智能技术生成

postman测接口，上传文件数据

html 用ele-UI组件，完成file文件的选取

          <el-upload
            class="upload"
            style="display:inline-block"
            action=""
            :show-file-list="false"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload"
          >
            <el-button size="small" type="primary">人员导入</el-button>
            <!-- <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div> -->
          </el-upload>

js代码 beforeUpload中回调file文件参数，加到新建的FormData对象中，作为文件参数上传

重点：new FormData()

    beforeUpload(file) {
      console.log(file, new FormData());
      let postForm = new FormData();
      postForm.append("file", file);
      this.http
        .post(
          "countyVillagePersonnelEntityImportCountyVillagePersonnel",
          postForm
        )
        .then(res => {
          console.log(res);
          if (res.respCode == "100200") {
          }
        });
        this.fetchData()
      return false;
    },
    uploadSuccess(response, file, fileList) {
      //beforeUpload中完成excel文件选取上传
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },