前端临床手札——文件上传

SexySix 发布于2019-08-19 18:07 / 2123人阅读

摘要：文件上传基本是学习前端路上必定遇到的例子，然而网上能找到的都是单单满足上传这步的案例。但前提是需要约定传入值和返回类型。

文件上传基本是学习前端路上必定遇到的例子，然而网上能找到的都是单单满足上传这步的案例。大多文章之所以只说上传这步估计是简单易入门，但是实际工作时就会发现上传文件这个功能上是简单的，逻辑上却比较复杂。

先说一下需求和功能点：

需求：上传文件到服务器
功能：上传

单这么看是简单的，下面再补充一下：

需求2：
    需要对图片裁剪压缩
    文件必须控制在2MB内
    上传文件必须是图片，包含的文件格式有:jpg、gif、png、jpeg、bmp
    上传文件到服务器
    记录上传文件（包含文件名字、位置、后缀、大小等）
功能：
    判断文件格式
    裁剪压缩图片
    上传
    记录数据

也不算复杂，可是这个从业务上来看只是单单的上传功能而已，用户可能还会提出更多要求，如：需要可视化信息(显示上传进度、提示上传成功或失败)、选择上传位置（或云存储，如：七牛）、需选择上传后的文件等其他需求，~~这就不细说了~~。

还是说说我遭遇的较为复杂的需求：

需求3：
    上传文件
    文件是图片则上传到[图片]仓库，是视频则上传到[视频]仓库，其他则上传到[其他]仓库
    需要对图片裁剪压缩
    文件大于2MB需启用分片上传
    上传至七牛云储存
    显示上传进度、提示上传结果
    记录上传文件（包含文件名字、位置、后缀、大小等）
功能：
    判断文件格式
    请求相应仓库上传token
    --图片--
    获得文件md5（作为文件名）
    裁剪压缩图片
    --视频--
    判断文件大小，大于2mb开启分片上传
    上传
    记录数据

这里面包含各种组件间数据传输、异步数据获取等问题尤为恶心...所以我还是拿需求2这份继续下面话题。

就目前需求能看出功能点是串行的，如下：

function upload(file){
    var verify = function(file){ return new Promise(...) },
        cut = function(file){ return new Promise(...) },
        upload = function(file){ return new Promise(...) },
        error = function(){...};
    return verify(file).then(cut).then(upload).catch(error);
}

//file change event
upload(e.currentTarget.files[0]).then(/*记录数据*/).catch(...);

若上传组件考虑可扩展性得把逻辑处理分离出来，逻辑处理也能以组件方式引入其中并予以调用。但前提是需要约定传入值和返回类型。

//上传类
function UploadFile(file){
    this.file = file;
    this.name = file.name;
    this.size = file.size;
    this.toFormData = function(data){...};
}

var uploader = new Uploader(),
    verify = function(uploadFile){ return new Promise(...) },
    cut = function(uploadFile){ return new Promise(...) };
uploader.precondition.add([verify,cut]);

//file change event
var key = function(uploadFile){ return new Promise(...) },
uploader.precondition.add(key); //可添加新条件
uploader.upload(new UploadFile(e.currentTarget.files[0])).then(/*记录数据*/).catch(...);

说这么多概念上的东西为的就是记录下工作时的真实情况，需要考虑的不单是功能，还得理解用这个功能的人背后的故事。

服务器托管混合云手札前端上传form表单前端js图片上传教程上传图片到服务器前端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79214.html

前端临床手札——webpack构建逐步解构（上）

摘要：前言由于博主最近又闲下来了，之前觉得的官方文档比较难啃一直放到现在。文章会逐步分析每个处理的用意当然是博主自己的理解，不足之处欢迎指出沟通交流。后续将会补上构建生产的配置分析，案例参考。前端临床手札构建逐步解构下前言由于博主最近又闲下来了，之前觉得webpack的官方文档比较难啃一直放到现在。细心阅读多个webpack配置案例后觉得还是得自己写个手脚架，当然这个案例是基于vue的，...

lowett 2019-08-22 10:36 评论0 收藏0
前端临床手札——webpack构建逐步解构（下）

摘要：续前端临床手札构建逐步解构上工作流程案例最近添加了雪碧图功能，并把替换成的，详细可以看分支构建生产上一篇说完了本地测试和是如何工作，接下来分析构建生产模式下配置如何配置和每个模块干了什么。续前端临床手札——webpack构建逐步解构（上）工作流程 showImg(https://segmentfault.com/img/bVCXjo?w=793&h=410); 案例：multip...

TerryCai 2019-08-22 10:37 评论0 收藏0
前端临床手札——单元测试

摘要：感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习最近博主工作是和另一枚后端合作，但是经常发现他写的接口出错，苦逼连连。感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。经过博主一番查找，貌似被推荐比较多的有mocha和chai，下面记录简...

kid143 2019-08-19 18:17 评论0 收藏0
前端临床手札——单元测试

摘要：感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习最近博主工作是和另一枚后端合作，但是经常发现他写的接口出错，苦逼连连。感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。经过博主一番查找，貌似被推荐比较多的有mocha和chai，下面记录简...

godlong_X 2019-05-29 16:57 评论0 收藏0
前端临床手札——在微信播放视频的那些事

摘要：然而我真的太天真，微信浏览器怎样会让你这样好过问题集中于自动播放视频这块，需求很简单自动播放全屏不显示工具条自动播放一步步来，自动播放这个问题在十分肯定默认是不支持的，必须基于用户操作下才能加载视频。至于在微信下和一个样。某天收到旧同事的信息说希望我帮手做一下一个简单的H5，然后我看了看的确很简单：就是图片滚动到最后自动播放视频，播完显示个按钮交互。然而我真的太天真，微信浏览器怎...

_Zhao 2019-06-21 16:15 评论0 收藏0