前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >《大胖 • 小课》- 写一个文件上传接口

《大胖 • 小课》- 写一个文件上传接口

作者头像
zz_jesse
发布2020-03-17 16:45:45
4910
发布2020-03-17 16:45:45
举报
文章被收录于专栏:前端技术江湖

这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第二节-《写一个文件上传接口》

上一节 《大胖 • 小课》- 我是这样理解文件上传原理的,我们说到了文件上传的原理,服务端的文件保存我们使用koa-body来完成。

上传接口实现过程

在项目开发中,文件上传本身和业务无关,代码基本上都可通用。

服务端文件的保存基于现有的库koa-body结合 koa2实现服务端文件的保存和数据的返回。

koa-body 会自动保存文件到系统临时目录下os.tmpdir(),也可以指定保存的文件路径。

然后在后续中间件内得到已保存的文件的信息,再做二次处理。

  • ctx.request.files.f1 得到文件信息,f1input file 标签的 name
  • 获得文件的扩展名,重命名文件

接口定义

接口地址:http://localhost:8100/upfile

接口返回格式

代码语言:javascript
复制
{
    code:0,
    msg:'',
    data:'图片可访问地址'
}

代码实现参考

NODE

代码语言:javascript
复制
/**
 * 服务入口
 */
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//解析 form-data消息体
var fs = require('fs');//文件模块
var Koa = require('koa2');

var app = new Koa();
var port = process.env.PORT || '8100';//默认端口8100

var uploadHost = `http://localhost:${port}/uploads/`;//图片可访问地址

app.use(koaBody({
    formidable: {
        //设置文件的默认保存目录,不设置则保存在系统临时目录下  os
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 支持文件上传,默认不不支持
}));

//开启静态文件访问
app.use(koaStatic(
    path.resolve(__dirname, '../static')
));


//二次处理文件,修改名称
app.use((ctx) => {
    if (ctx.path === '/upfile') {
        var file = ctx.request.files ? ctx.request.files.f1 : null; //得到文件对象
        if (file) {

            var path = file.path.replace(/\\/g, '/');
            var fname = file.name; //原文件名称
            var nextPath = '';
            if (file.size > 0 && path) {
                //得到扩展名
                var extArr = fname.split('.');
                var ext = extArr[extArr.length - 1];
                nextPath = path + '.' + ext;
                //重命名文件
                fs.renameSync(path, nextPath);
            }
            //以 json 形式输出上传文件地址
            ctx.body = getRenderData({
                data: `${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/') + 1)}`
            });
        }else {
            ctx.body = getRenderData({
                code:1,
                msg:'file is null'
            });
        }

    }

});

/**
 *
 * @param {设置返回结果} opt
 */
function getRenderData(opt) {
    return Object.assign({
        code:0,
        msg:'',
        data:null
    },opt);
}

/**
 * http server
 */
var server = http.createServer(app.callback());
server.listen(port);
console.log('upload file server start ......   ');

接口测试

代码语言:javascript
复制
//启动服务
$ node ./src/upfiles-demo/api-upfile/server/app.js
//访问静态 html 页面
http://localhost:8100/html/upfile.html
//选择文件后上传

源码参考

https://github.com/Bigerfe/fe-learn-code/tree/master/src/upfiles-demo/api-upfile

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-10-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端技术江湖 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 上传接口实现过程
  • 接口定义
  • 代码实现参考
  • 接口测试
  • 源码参考
相关产品与服务
消息队列 TDMQ
消息队列 TDMQ (Tencent Distributed Message Queue)是腾讯基于 Apache Pulsar 自研的一个云原生消息中间件系列,其中包含兼容Pulsar、RabbitMQ、RocketMQ 等协议的消息队列子产品,得益于其底层计算与存储分离的架构,TDMQ 具备良好的弹性伸缩以及故障恢复能力。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档