快捷導(dǎo)航

node+axios實(shí)現(xiàn)服務(wù)端文件上傳示例

更新時(shí)間：2022年06月28日 08:34:03 作者：天問

這篇文章主要介紹了node+axios實(shí)現(xiàn)服務(wù)端文件上傳示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

最近調(diào)研企業(yè)wx集成H5應(yīng)用，其中有一個(gè)發(fā)送圖文消息，需要上傳圖片到臨時(shí)素材庫。之前做過文件上傳到阿里云、七牛云都是服務(wù)端提供封裝好的文件上傳接口，在客戶端使用ajax的方式上傳。所以就來踩踩坑，使用node+axios實(shí)現(xiàn)服務(wù)端文件上傳。

一、接口文檔介紹

請求方式：POST（HTTPS）

請求地址：https://qyapi.weixin.qq.com/cgi-bin/media/upload?access_token=ACCESS_TOKEN&type=TYPE

使用multipart/form-data POST上傳文件，文件標(biāo)識名為”media”。
POST的請求包中，form-data中媒體文件標(biāo)識，應(yīng)包含有 filename、filelength、content-type等信息。
參數(shù)說明：

參數(shù)	必須	說明
access_token	是	調(diào)用接口憑證
type	是	媒體文件類型，分別有圖片（image）、語音（voice）、視頻（video），普通文件（file）

二、文件上傳

2-1.初始化項(xiàng)目

# 創(chuàng)建目錄
mkdir upload-demo
# 進(jìn)入upload-demo目錄
cd upload-demo
# npm 初始化
npm init -y
# 創(chuàng)建app.js
touch app.js

2-2.安裝插件依賴

axios：是一個(gè)基于 promise 的 HTTP 庫，可以用在客戶端瀏覽器和服務(wù)端node.js 中。

form-data：是創(chuàng)建可讀multipart/form-data流的庫。可用于向其他 Web 應(yīng)用程序提交表單和文件上傳。

npm i -S axios form-data

2-3.上傳核心代碼

// app.js
const fs = require('fs')
const FormData = require('form-data')
const axios = require('axios')
;(()=>{
    let formData = new FormData();
    let imgFiles = fs.createReadStream('./test.jpg')    // 根目錄下需要有一個(gè)test.jpg文件
    formData.append('media', imgFiles);
    axios({
        url: 'https://qyapi.weixin.qq.com/cgi-bin/media/upload',
        method: 'POST',
        params: {
            access_token: 'ACCESS_TOKEN',   // ACCESS_TOKEN 需要替換為真實(shí) token
            type: 'image',   // 這里以上圖片為例
        },
        data: formData,
        headers: {
            'Content-Type': 'multipart/form-data', // 必須要設(shè)置
        },
    }).then(res=>{
        console.log(res.data)
    })
})();