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

通过gitbook浏览此随笔

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

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

安装所需中间件

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
}

参考资源

koa2

koa-body

node-formidable

uni-app API文档

uni-app 文件上传API文档

uni-app 图片选择API文档

uni-app开发的应用(小程序,app,web等),使用Node+Koa2开发的后端程序接收上传文件的方法的更多相关文章

  1. PHP开发-上传文件

    <?php /****************************************************************************** 参数说明: $max_ ...

  2. 小程序云开发--云函数上传文件或图片 base64

    云函数开发遇到的问题 在微信云开发环境当中,普通的用户并没有往云存储内写入文件的权限 所以普通用户想要使用wx.cloud.uploadFile显然是不现实的 但是我们同时也知道,云函数是后台服务端, ...

  3. Day12-微信小程序实战-交友小程序-搭建服务器与上传文件到后端

    要搞一个小型的cms内容发布系统 因为小程序上线之后,直接对数据库进行操作的话,慧出问题的,所以一般都会做一个管理系统,让工作人员通过这个管理系统来对这个数据库进行增删改查 微信小程序其实给我们提供了 ...

  4. 微信小程序上传文件遇到的坑

    在开发小程序时,使用的花生壳做的内网映射,域名使用花生壳卖的https域名 在做小程序文件上传时,调用接口,老是报错. Caused by: org.apache.commons.fileupload ...

  5. Linux下开发python django程序(设置admin后台管理上传文件和前台上传文件保存数据库)

    1.项目创建相关工作参考前面 2.在models.py文件中定义数据库结构 import django.db import modelsclass RegisterUser(models.Model) ...

  6. 微信小程序小技巧系列《二》show内容展示,上传文件编码问题

    作者:gou-tian 来自:github show内容展示 尝试用微信小程序的template组件实现.同时,尝试页面间转跳时传参,在目标页面引入模板文件实现 写的更少,做的更多 篇幅有限详细代码此 ...

  7. 转:【微信小程序】 微信小程序-拍照或选择图片并上传文件

    调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobj ...

  8. 【Azure 应用服务】使用PowerShell脚本上传文件至App Service目录  

    问题描述 使用PowerShell脚本上传文件至App Service目录的示例 脚本示例 对文件进行上传,使用的 WebClient.UploadFile 方法进行上传.当文件夹中包含子目录,执行以 ...

  9. Taro 微信小程序 上传文件到minio

    小程序前端上传文件不建议直接引用minio的js npm包,一来是这个包本身较大,会影响小程序的体积,二来是ak sk需要放到前端存储,不够安全,因此建议通过请求后端拿到签名数据后上传. 由于小程序的 ...

随机推荐

  1. 迭代器/生成器/装饰器 /Json & pickle 数据序列化

    本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 1.列表生成式,迭代器&生成器 列表生成式 孩子,我现在有个需 ...

  2. SPOJ - The last digit

    https://vjudge.net/problem/SPOJ-LASTDIG 求最后一位,%10就完了 这个题居然要求代码小于等于700B #include <iostream> #in ...

  3. 三次面试总结以及今后的todolist

    金三银四跳槽季,按耐不住蠢蠢欲动的跳槽心,投了好多家的前端招聘,目前面了三家,有把握的零家.古人吾日三省吾身,我没那么高的觉悟,三面省一下自身,太咸鱼了是的我就是这么觉得的. 第一家公司在景田,很远, ...

  4. http response 过长 导致Connection reset

    http response 过长(2W byte) 导致Connection reset

  5. CDN与智能DNS原理和应用

    1.cdn概念,DNS概念 CDN:Centent Delivery Network(内容分发网络) 使用户可以就近取得所需内容,提高用户访问网站相应速度 CDN=更智能的镜像+缓存+流量导流: DN ...

  6. 服务器迁移部署OmsWeb

    绑定 基本设置 高级设置

  7. 转:如何成为Linux高手

    源地址:http://www.douban.com/note/60936243/ 经过几年的发展,公司在互联网公司里面也算是大公司了,线上机器使用的操作系统都是Linux,部门有几个同事,天天都跟Li ...

  8. jQuery实现textarea高度根据内容自适应

    //jQuery实现textarea高度根据内容自适应 $.fn.extend({ txtaAutoHeight: function () { return this.each(function () ...

  9. springboot思维导图

  10. 第一个WindowService服务

    背景:Web项目中需要定时执行一段程序 方法: 1.新建一个WindowService项目 2.添加代码 public partial class Service1 : ServiceBase { S ...