博客
关于我
uni-app开发的应用(小程序,app,web等),使用Node+Koa2开发的后端程序接收上传文件的方法
阅读量:440 次
发布时间:2019-03-06

本文共 1933 字,大约阅读时间需要 6 分钟。

uni-app使用使用Node+Koa2开发的后端程序接收上传的文件

通过其它客户端上传(h5,小程序等),接收方法一致

使用koa接收时,我们需安装一个中间件koa-body

安装所需中间件

npm install --save koa-body

配置koa-body

//...codeconst 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}

参考资源

转载地址:http://ltcfz.baihongyu.com/

你可能感兴趣的文章
最近一个项目的反思
查看>>
grape动态PHP结构(二)——管理后台
查看>>
JavaScript中事件处理
查看>>
前端自动化构建工具gulp记录
查看>>
移动端图片操作(一)——上传
查看>>
Hammer.js分析(四)——recognizer.js
查看>>
移动端 H5图片裁剪插件,内置简单手势操作
查看>>
JavaScript性能优化 DOM编程
查看>>
linux系统常用命令
查看>>
综合架构的简述
查看>>
企业集群架构
查看>>
经典shell面试题
查看>>
Linux基础命令总结
查看>>