🤓
blog-article
  • Introduction
  • 面试题
    • 1. 输入url发生了什么
  • Personal Works
    • 1. 简单的Web图床
  • CSS动画笔记
    • 1.transition 属性
    • 2.transition 实例
  • css 笔记
    • 1. box-shadow 阴影
    • 2. columns 设置列宽和列数
    • 3. 伪元素after与before
  • html 笔记
    • 1. 不常用的h5标签杂记
  • webpack4
    • 1. 文档学习记录
    • 2. 加载CSS
    • 3. 加载less
    • 4. 加载sass
    • 5. 根据浏览器自动添加css前缀
    • 6. 图片文件处理
    • 7. 字体文件处理
    • 8. 引入jQuery
    • 9. 打包HTML文件
    • 10. 分离css插件
    • 11. babel简单使用
    • 12. 清理旧打包文件插件
    • 13. 拷贝静态资源
  • javascript
    • 1. js获取某年某月的天数
  • npm
    • 2. JSON.stringify()完整用法
    • 1. 入门篇
    • 2. 进阶篇
  • Node.js
    • 1. 使用koa-body中间件后ctx.request.body内容为空
    • 2. uni-app使用Node+Koa2接收上传的文件
  • SQL
    • 1. 查询
    • 2. 插入
    • 3. 修改
    • 4. 删除
    • 5. 期末复习
  • Git
    • 1. git add命令后出现another git process...问题
    • 2. 将文件从暂存区移除
  • vue-cli
    • 1. vue-cli(脚手架)引入vue.config.js文件后热更新失效,每次保存都会刷新页面
  • uni-app
    • 1. uni-app中不使用scroll-view组件,监听页面滑直底部事件
  • 设计模式
    • 创建型模式
    • 单例模式
    • 工厂模式
    • 抽象工厂模式
  • Spring boot
    • 1. 使用自定义参数注解获取 token 中User数据
  • IDEA
    • 1. 设置maven项目的默认配置
  • Linux
    • 1.常用命令
    • 2.常用基础命令2
    • 3.linux目录介绍
    • 4. vi编辑器使用
    • 5.用户管理
    • 6. 文件属性与权限操作
    • 7. 文件归档与解压缩
    • 8. gcc的基本用法
    • 9. gdb调试器的基本用法
    • 10. Makefile基本用法
  • shell
    • shell与crontab定时器的结合
    • 1. shell 变量与常见符号
    • 2. shell中的四则运算符
    • 3. 条件判断
    • 4. 输入输出
    • 5. 输出彩色的内容
    • 6. 流程控制
    • 7. 函数
  • Docker
  • 嵌入式系统给结构及原理
  • 学校课程笔记
    • 1. java EE 复习
    • 2. 马原复习论述题
    • 3. 嵌入式软件技术复习
    • 4. 嵌入式操作系统复习
    • 5. 马原选择题
    • 6. 马原辨析题
    • 7. 马原材料题
    • 8. 计网学习笔记
    • 9. 计网复习
      • 1. 第一章
Powered by GitBook
On this page
  • 安装所需中间件
  • 配置koa-body
  • uni-app中上传文件请求
  • 上传函数提示
  • 接收文件代码
  • 参考资源

Was this helpful?

  1. Node.js

2. uni-app使用Node+Koa2接收上传的文件

通过其它客户端上传(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
}

参考资源

Previous1. 使用koa-body中间件后ctx.request.body内容为空NextSQL

Last updated 5 years ago

Was this helpful?

koa2
koa-body
node-formidable
uni-app API文档
uni-app 文件上传API文档
uni-app 图片选择API文档