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

时间:2023-02-24 08:21:38

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程序&lpar;设置admin后台管理上传文件和前台上传文件保存数据库&rpar;

    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目录 &ThinSpace;

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

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

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

随机推荐

  1. 用python实现最长公共子序列算法&lpar;找到所有最长公共子串&rpar;

    软件安全的一个小实验,正好复习一下LCS的写法. 实现LCS的算法和算法导论上的方式基本一致,都是先建好两个表,一个存储在(i,j)处当前最长公共子序列长度,另一个存储在(i,j)处的回溯方向. 相对 ...

  2. C&num;在二维码中添加圆角logo

    public class QRCodeHelper { #region 合并用户QR图片和用户头像 /// <summary> /// 合并用户QR图片和用户头像 /// </sum ...

  3. jQuery post数据至ashx

    今天给大家分享一个小功能,在jQuery环境中,Post data to ashx进行数据交互. 参考下面代码示例: $.ajax({ url: '<%= ResolveUrl("~/ ...

  4. 【CC评网】2013&period;第41周 不求排版,简单就好

    书单 碰上国庆,加上这周,消化掉几本书: <软件随想录>:Joel的随想录,也就是他Blog上的文章的摘选:整本书看下来轻松:写了篇读书笔记[传送门]: <中国在梁庄>:这本书 ...

  5. CTEX里的函数、符号及特殊字符

    CTEX里的函数.符号及特殊字符 声调 语法 效果 语法 效果 语法 效果 \bar{a}   \acute{a}   \check{a}   \grave{a}   \tilde{a}   \hat ...

  6. Need help with design ReadOnlyListBase &lpar;Insert&comma; Update&comma; Delete from ReadOnlyListBase&rpar;

    原文地址:http://forums.lhotka.net/forums/p/3166/21214.aspx My task is: For select client, I have a modal ...

  7. iOS 中UIButton的 settitle 和 titlelabel的使用误区

    UIButton中设置Titl方法包括以下几种: - (void)setTitle:(NSString *)title forState:(UIControlState)state; - (void) ...

  8. 查询记录rs&period;previous&lpar;&rpar;使用

    查询记录rs.previous()使用 假如查询一个数据表,假设没有记录就显示提示信息.有就所有显示出来查询结果.这时假设是有查询结果的话就须要进行两次查询.第一次查完记录指针指向最后一条记录.開始第 ...

  9. python jieba 库分词结合Wordcloud词云统计

    import jieba jieba.add_word("福军") jieba.add_word("少安") excludes={"一个", ...

  10. linux下工具exfs用法

    背景:买了一块新的ssd硬盘,挂载到ubuntu下. 1.快速格式化: 1)查看ssd硬盘的盘符: sudo fdisk -l 2)快速格式化: sudo mkfs.ext4 -T default / ...