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. 廖雪峰Java15JDBC编程-3JDBC接口-3JDBC更新

    使用update语句的时候,需要通过JDBC实现update语句的执行,这个时候仍然通过PreparedStatement对象来使用,直接传入update语句,然后通过setObject传入占位符的值 ...

  2. spark Infinate 的处理

    去掉infinity数据的方法: absperrordf_rdd = absperrordf.rdd.filter(lambda x: (np.isinf(float(x.avgperror)) == ...

  3. mysql 存中文失败问题

    在向数据库存中文时报错: 将中文字段的字符集改为utf8即可: 成功截图:

  4. Android基础控件TextClock和Chronometer的使用

    1.简介 DigitalClock, TextClock,AnalogClock,Chronometer其中DigitalClock和AnalogClock废弃了! TextClock是在Androi ...

  5. 03_springmvc整合mybatis

    一.整合思路 springmvc+mybaits的系统架构: 第一步整合dao层:mybatis和spring整合:通过spring管理mapper接口,使用mapper的扫描器自动扫描mapper接 ...

  6. ElasticSearch入门介绍之安装部署(二)

    散仙,在上篇文章对ElasticSearch整体入门作了个介绍,那么本篇我们来看下,如何安装,部署es,以及如何安装es的几个比较常用的插件. es的安装和部署,是非常简单方便的,至少这一点散仙在es ...

  7. VS2017装了西红柿插件之后,启动很多次才能启动成功,进程有很多devenv.exe但是就是无法启动成功

    VS2017装了西红柿插件之后,启动很多次才能启动成功,进程有很多devenv.exe但是就是无法启动成功,这个可能是西红柿插件visual assist的问题 启动vs命令行 输入: devenv ...

  8. Codeforces 486D. Valid Sets

    D. Valid Sets time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  9. 前端在本地启动服务预览html页面

    在开发移动端项目时浏览器里出来的效果往往到真机上和预想的有出入,在开发过程中知道了一个可以在本地自己启动一个服务器在手机预览的办法. 1.首先在终端安装http. npm i http-server ...

  10. html的常用标签详解1

    1.<!DOCTYPE html> 文档声明,不算是标签,但是它可是不能少.这玩意是干什么用的呢? 它是向浏览器自报家门的,即告诉浏览器的解析器应该以什么样的文档类型定义(DTD)来解析它 ...