FormData多个文件上传（fileList集合）

Xiaochen1239

已于 2024-05-23 15:16:09 修改

阅读量3.6k

点赞数 4

文章标签： jquery 前端 vue.js

于 2024-02-20 17:02:10 首次发布

本文链接：https://blog.csdn.net/Xiaochen1239/article/details/136193649

版权

当接口需要文件格式的参数进行文件上传时，前端上传的文件需要使用 FormData

FormData主要作用：网络请求中处理用来异步的上传文件

例如：后端需要前端传的参数file但是他是一个集合List

这里的方式有两种

1.使用jquery的ajax进行上传

2.使用axios进行文件上传

第一种方式实现

js代码

upFiles(formId) {
          const Ajaxurl =this.baseUrl + "/attachment/add?relevanceId=" + formId;
          const _this = this;
          const fileArr = _this.fileList.filter(
            (v) => v.url !== "http://baidu.com"
          );
          // 如果没有新增的附件，就做伪提示
          if (_this.fileList.every((v) => v.url === "http://baidu.com")) {
            _this.$message({ type: "success", message: "上传成功！" });
            _this.saveLoading = false;
            return;
          }
          let formData = new FormData();
          fileArr.forEach((item) => {
            formData.append("file", item);
          });
          $.ajax({
            type: "POST",
            url: Ajaxurl,
            dataType: "json",
        //jquery上传附件的时候需要将下面两个参数设置成false不然会出现报错信息
            processData: false,
            contentType: false,

            beforeSend: function (XMLHttpRequest) {
              XMLHttpRequest.setRequestHeader(
                "binding",
                _this.getCookie("binding")
              );
            },
            data: fd,
            success: function (ajaxResult) {
              _this.tableLoading = false;
              if (ajaxResult.returnCode == 1) {
                _this.$message({
                  type: "success",
                  message: "新增成功",
                });
                _this.loading = false;
                _this.saveLoading = false;
                setTimeout(() => {
                  if (window.opener == null) {
                    window.location.href =
                      "/query.action?id=" + formId + "&m=query";
                  } else {
                    window.opener.location.reload();
                    window.close();
                  }
                }, 1000);
              } else {
                _this.$message({
                  type: "error",
                  message: ajaxResult.returnInfo,
                });
              }
            },
            error: function (err) {
              _this.loading = false;
              _this.saveLoading = false;
              alert("发生错误：" + err.status);
            },
          });
}

tipes：当jquery上传的时候将contentType设置成了formdata的时候出现Uncaught TypeError ：Illegal invocation 报错

解决：

 $.ajax中的参数重新进行设置

 processData: false,
 contentType: false,


 $.ajax({
   type: "POST",
   url: Ajaxurl,
   dataType: "json",
   processData: false,
   contentType: false,
   beforeSend: function (XMLHttpRequest) {
      XMLHttpRequest.setRequestHeader("binding", _this.getCookie("binding"));
   },
   data: fd,
   success: function (ajaxResult) {
       成功干什么
   },
   error: function (err) {
       失败干什么
       alert("发生错误：" + err.status);
   }
 })

axios方式实现

js代码

upFiles(formId) {
        //请求的url
          const Ajaxurl = this.baseUrl + "/attachment/add?relevanceId=" + formId;
          const _this = this;
        //重复文件不再上传
          const fileArr = _this.fileList.filter(
            (v) => v.url !== "http://baidu.com"
          );

          let formData = new FormData();
           //多个文件进行循环添加 formData.append("file", item);多个将会自己转成数组进行上传
          fileArr.forEach((item) => {
            formData.append("file", item);
          });
            
            //请求体
          axios
            .post(Ajaxurl,
              formData, //携带的表单file
              {
                //当时是表单是的时候需要将请求头设置成multipart/form-data
                headers: {
                  "Content-Type":
                    "multipart/form-data; boundary=<calculated when request is sent>",
                  binding: _this.getCookie("binding"),
                },
              }
            )
            .then((ajaxResult) => {
              _this.tableLoading = false;
              if (ajaxResult.data.returnCode == 1) {
                _this.$message({
                  type: "success",
                  message: "新增成功",
                });
                _this.loading = false;
                _this.saveLoading = false;
                return 
                setTimeout(() => {
                  if (window.opener == null) {
                    window.location.href =
                      "/query.action?id=" + formId + "&m=query";
                  } else {
                    window.opener.location.reload();
                    window.close();
                  }
                }, 1000);
              } else {
                _this.$message({
                  type: "error",
                  message: ajaxResult.data.returnInfo,
                });
              }
            })
            .catch((error) => {
              _this.loading = false;
              _this.saveLoading = false;
              alert("发生错误：" + err.status);
            });
        },

最后看看上传控制台的样子吧

第一种样子

------WebKitFormBoundaryqko4onsawDOCCtSk Content-Disposition: form-data; name="file"; filename="新建文本文档.txt" Content-Type: text/plain ------WebKitFormBoundaryqko4onsawDOCCtSk--------

------WebKitFormBoundaryk4y2P2fXBa25G7XA1d Content-Disposition: form-data; name="code"

filename="新建文本文档.jpg" Content-Type: multipart/form-data

------WebKitFormBoundaryk4y2P2fXBa25G7XA1d--