uni-app開發的應用(小程序,app,web等),使用Node+Koa2開發的後端程序接收上傳文件的方法

時間 2019-11-13

標籤 uni app 開發應用程序 web 使用 node+koa2 node koa 後端接收上傳文件方法欄目 HTML 简体版

原文原文鏈接

uni-app使用使用Node+Koa2開發的後端程序接收上傳的文件

經過其它客戶端上傳(h5,小程序等),接收方法一致git

使用koa接收時,咱們需安裝一箇中間件koa-bodygithub

安裝所需中間件

npm install --save koa-body

配置koa-body

//...code
const Koa = require('koa');

const koaBody = require("koa-body");

const app = new Koa();
app.use(koaBody({
    multipart: true,
    strict: false,//解析全部請求
    formidable: {
         maxFileSize: 200 * 1024 * 1024//文件大小限制
    }
}))
//...code

uni-app中上傳文件請求

methods:{
    /**
    * 上傳文件
    * @param {String} filePath 文件所在臨時路徑
    */
    uploadFile:function(filePath){
        uni.uploadFile({
            url:`${this.baseUrl}/file/upload`,
            formData:{
                account:"123456",
                typeName:"水果"
            },
            filePath:filePath,
            name:"file",
            success: (res) => {
                console.log(res.data);
                // {code:200,filename:"文件名.xx"}
            }
        })
    }
}

上傳函數提示

上傳參數filePath 是uni.chooseImage API的成功回調參數tempPath(Array)中的內容

接收文件代碼

const fs = require("fs");

/**
 * 處理文件上傳方法
 * @requestParam {Number} account 帳號
 * @requestParam {String}  typeName 分類名稱
 */
const fn_uploadFile = async (ctx, next) => {
    // 獲取body中攜帶的參數
    const { account, typeName } = ctx.request.body;
    // account:123456
    // typeName:水果

    // 經過ctx.request.files.file方法獲取上傳的文件對象

    // 獲取文件名稱與文件所在路徑
    const { name: filename, path } = ctx.request.files.file;

    // 建立文件輸入流
    const fileReader = fs.createReadStream(path);
    
    // 文件將要的存放文件夾路徑
    const fileDir = `${__dirname}/../../../upload-static/images/${account}/${typeName}`;

    // 判斷目錄是否存在,目錄不存在則建立
    if (!fs.existsSync(fileDir)) {
        try {
            fs.mkdirSync(fileDir);
        } catch (e) {
            console.error(e);
        }
    }

    // 保存文件的最終路徑 (文件夾路徑+文件名)
    const filepath = `${fileDir}/${filename}`;
    
    // 建立文件輸出流
    const fileWriter = fs.createWriteStream(filepath);

    // 寫入文件數據
    fileReader.pipe(fileWriter);

    // 至此文件已上傳完成

    // 向客戶端返回的內容
    ctx.response.body={
        code: 200,
        filename
    };
}

module.exports = {
    "POST /api/file/upload": fn_uploadFile
}