当前位置: 代码迷 >> 综合 >> axios 上传文件遇到的坑
  详细解决方案

axios 上传文件遇到的坑

热度:26   发布时间:2023-11-24 22:57:55.0

         最近大佬布置了一个任务,实现埋点的小工具开发,主要任务就是实现一个脚本工具,能够快速实现埋点的创建

        其中有一部分就是使用axios 发送数据,这里记录一下遇到的坑

        在使用 Node.js 部分埋点时,主要的流程可以是这样的 https://www.cnblogs.com/ajanuw/p/9822880.html

(async () => {const l = console.log;const axios = require("axios");const fs = require("fs-extra");var FormData = require("form-data");var form = new FormData();form.append("file", fs.createReadStream("C:\\Users\\Administrator\\Pictures\\a.jpg"));form.append("type", "avatar");let r = await axios({method: "post",url: "http://localhost:5000/upload",data: form,headers: form.getHeaders()}).then(v => v.data);l(r); // ok
})();

         自己使用引入 fs 和 form-data 后即可,也不需要特殊指定 form 的type 类型。网上查了很多发现都要使用form-data , 研究了一圈基本使用 form-data 是没问题的。用 createReadStream 读取的是下图的这些配置文件 

       使用 readFileSync 后是:

      可以看到用 readFileSync 读取的文件是一个二进制的文件,这个与学城上的发送请求是一样的。但是这样还是没有解决问题,研究原项目上的请求后发现,在请求头后还会携带一个 boundary,加上 boundary 后该问题得以解决。

     代码

var FormData=require('form-data')
var formdata=new FormData();
var headers={"Cookie":"xx""Content-type":`multipart/form-data;boundary=${formdata._boundary}`
}

      总结:使用 readFileSync 还是 createReadStream 都可以读取文件,在nodejs 端发送表格请求时,还需要加入formdata._boundary 。boundary 就是分割线的意思,用于分割表单的每项数据也表示表格的结束。没加这个后端就识别不了,这个Bug 前后加起来卡了一天多,做个小记录

  相关解决方案