axios POST 上传七牛云

一段简单的代码

var FormData = require('form-data');

const axios = require('axios')
const util = require('./utils/qnOpt')
fs = require('fs')

var k = util.getUploadKey()

var f = fs.readFileSync('./test.html');

const formData = new FormData();
let url = "https://up-cn-east-2.qiniup.com/"
formData.append('token', k);
formData.append('filename', 'test.html')
formData.append('file', f)

axios({
    method: 'post',
    url: url,
    data: formData,
    headers: {
        'Content-Type': `multipart/form-data`
    }
}).then((r)=>{
    console.log(r.data)
}).catch((e) => {
    console.log(e)
})

FormData

首先，在 nodejs 无法使用 FormData ，stackoverflow 有一个回答说，可以使用 URLSearchParams ，但是，调试了很久仍然报错，经过，查看http body 发现，URLSearchParams 并非使用 form 形式提交。所以，FormData 不能使用 URLSearchParams 代替。应该使用 from-data 包

1	npm install --save form-data

在 js 中引入

1	const FormData = require('form-data');

Content-Type

在使用 form-data 之后，仍然报一长串的错误，不过，可以注意到一些关键信息报错如下：

data: {
      error: 'invalid multipart format: no multipart boundary param in Content-Type'
    }

根据提示，将 header 改为

1
2
3

headers: {
    'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
}

重新运行，成功上传文件

other tips

起初按照七牛文档写表单字段，一直失败，于是去抓包七牛云官方网站上传数据包，发现其上传字段与文档不一致。

Author: 哒琳

Permalink: http://blog.jieis.cn/2022/ad36c504-5674-452e-bbd6-b1310f178e58.html

updated at 2022-03-05

# code # javascript # axios # qiniu

axios POST 上传 七牛云

axios POST 上传 七牛云

FormData

Content-Type

other tips

Comments

axios POST 上传七牛云

axios POST 上传七牛云