Node.js使用Axios套件POST上傳檔案

會有這個需求是有個既有的網頁只能接受POST表單上傳檔案

套件設定/安裝

在Node.js環境

yarn add axios
yarn add -D @types/axios

一般引用

const axios = require('axios').default;

ES引用

impor axios from 'axios';

常用post處理

因為axios預設處理json,所以其他content-type會需要額外套件處理，官方網站描述不同環境的不同方式

1. 針對Content-Type: application/x-www-form-urlencoded

修正: 雖然我記得應該有這種上傳檔案的方式，不過sniffer看結果是chrome只會丟檔名，並不會發送任何檔案的內容

純粹HTML網頁

<form action="https://example.com" method="post" enctype="application/x-www-form-urlencoded">

<input type="text" name="description" value="some text">

<input type="file" name="myFile">

<button type="submit">送出</button>

</form>

在Node.js環境

內建querystring套件

const config = {

headers: { "Content-Type": "application/x-www-form-urlencoded" }

};

const data = require('querystring').stringify({

description: 'my value',

});

axios.post("https://example.com", data, config)

2. 針對Content-Type: multipart/form-data

用網頁

<form action="https://example.com" method="post" enctype="multipart/form-data">

<input type="text" name="description" value="some text">

<input type="file" name="myFile">

<button type="submit">送出</button>

</form>

在Node.js環境

安裝套件

yarn add form-data

程式碼

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

const form = new FormData();

form.append('description', 'my value');

form.append('myFile', fs.createReadStream('/foo/bar.jpg'), 'bar.jpg');

axios.post('https://example.com', form, { headers: form.getHeaders() })

參考資料

• https://cythilya.github.io/2015/08/16/node-form-handling-and-file-uploads/