图片上传功能设计的时候需要考虑些什么？

在完成项目的时候，在图片上传模块遇到了一系列的问题，有些问题开始时也没有想过，于是总结出来分享。

图片素材来源于网络，为方便解说有一些是在网站上截取的GIF，侵删。

文件上传

首先上传文件分为很多种，比如说是文档doc？pdf？xlsx？，图片jpg？png？gif？psd？，视频mp4？avi？wmv？，压缩包zip？rar？7z？等等，每种遇到的问题都会不太一样。

上传前文件格式限制，文件识别；

上传中文件如视频，会不会因为文件过大，上传会超时；
上传后是否预览和编辑，各种文件会不一样。

这边以PC端上传情况做简单分析。

（PC端上传跟移动端会有些区别，移动端还涉及到是否需要拍照上传、选择相册等问题，此处不做详细讨论。）

上传图片的基本行为

把 符合规则 的 图片 上传 到 服务器，并且 呈现 。

这边故意划重点，因为每一个都跟后面的问题有关。

图片基本属性（如，不小于300*300px，支持jpg、png，小于等于10M）

• 图片的文件格式

• 大小 

• 图片宽 

• 图片高 

• 图片数量

上传图片的基本流程

如果是移动端，编辑在选择图片后，上传操作前，参见朋友圈或者微博等上传。

我们的项目，传图功能基本搭配其他功能存在，比如裁剪、抠图、智能合成、下载或进行微编辑，所以考虑的问题会稍微多一些。（暂时产品未对外开放，所以不会放我们自己项目的截图）

为方便理解，简单的画了一个流程图（第一次摸索画流程图，不对的地方欢迎指出，先谢谢各路大侠）

设计过程中我们需要考虑什么？

（然后接下来夺命连环问，从来没想过，设计一个功能的时候，问了自己这么多的问题！o(╥﹏╥)o，我知道自己挺烦人的，只是没想到居然这么的“烦人”。。。）

上传前

• 文件格式、大小有限制吗（业务方、服务器有要求吗） ？ 

• 一次可以上传多少文件？单张上传？批量上传？是否可以压缩包上传？ 

• 异常的文件怎么处理？已经传过的呢（覆盖还是追加）？重名怎么处理？ 

• 点击上传吗？是不是可以支持拖拽？复制粘贴上传可以吗？

• 如果是网盘那种上传，需要选择存储位置如文件夹吗？

--------------------------------  没图片的手动分割线  --------------------------------

上传中

• 上传进度要显示吗？——据说，通过浏览器上传是无法获取文件上传进度的

• 上传的时候断网了怎么办？需要显示网速吗？

• 上传中可以暂停吗？可以断点续传吗？ 

• 上传成功或者失败的提示？有失败最大重试次数吗？还是用户无感上传几次之后默认失败？ 

• 触发的时候，手动上传还是自动上传？ 

• 上传的文件要压缩吗？压缩规则是什么？（什么时候压缩？怎么压缩？）如果压缩需要存原图吗？

• 最大同时支持多少个任务同时上传？服务器支持多少个？ 

• 各任务状态如何排序与展示？

--------------------------------  没图片的手动分割线  --------------------------------

上传后

• 上传后，支持删除吗？多图情况是否可以一键清除？是否可以重新上传？ 

• 可以预览吗？需要缩略图吗？预览的规则是什么？直接按照比例缩放？显示中间部分？

• 是否可以逐个编辑？可以重命名吗？

• 文件什么时候传到服务器？选择文件后自动传？还是与其他事件触发？ 

• 上传后的文件可以下载吗？多文件可批量下载吗？

好了，问完了，里面有些问题是针对前端或者开发同学的，我们这边跳过，接下来会针对跟UED相关的一些问题，进行稍微详细的说明。

具体问题分析

1、文件格式、大小有限制吗？

—— 上传前以提示加教育为主，通过限制并引导用户行为，减少或不给犯错的机会。

设计默认提示，说明基本要求与限制，主要是图片属性相关；上传前也可以在文件选择器中加入判断，只显示符合规范的文件。

2、一次可以上传多少文件？支持单图还是多图？

——  通过文本提示/预留坑位提示

预留坑位一般有必填或者引导填满的暗示，尽量避免。

下图为身份证上传提示，两个图必须填满，并且做了详细的说明，减少传错机会（一般是分不清那面是正面，哪面是背面）。

3、是否有多次上传场景？

——  保留上传的入口，已上传文件做展示

4、点击上传还是拖拽上传？

——  如点击上传，需要明确的点击按钮；如果能支持拖拽，拖拽区域尽量大一些，太小的拖拽区域影响使用体验

5、异常文件怎么处理？已经传过的怎么处理？

——  上传失败的文件，提示失败，如果有上传记录可删除；一半成功一半失败，有些平台只记录成功文件，失败则忽略

——  某些智能设计平台中，如果是传图到素材库，每个图可能用处不一样，没有做校验，支持重复上传；我们的项目，使用场景比较特殊，上传商品图需智能合成，不能重复名称，如系统识别为同一文件则跳过，不重新上传

6、上传进度要显示吗？上传中可以暂停吗？

——  一般都会有进度展示，只是很多时候，并非真实加载状态，这要看具体开发是否可获取到

——  通过浏览器上传无法获取文件上传进度，目前我们这边没有用到这种方式

△站酷支持暂停，且上传过程可以追加（对，那个小图你没看错，就是我龙）

△某智能设计平台上传过程中不支持追加

7、上传成功或失败的提示？

——  上传成功失败与否，都需要给结果反馈

8、触发的时候，手动上传还是自动上传？

——  失败成本较高的一般采用手动上传，追求快速出结果的如智能抠图，直接上传

比如申请流程时，文档一般先暂存本地，其他信息编辑完成后，统一提交上传服务器。

9、各任务状态如何排序与展示？

——  看是否多任务同步进行，ant design控件及花瓣上传，直接按照原本状态排序

——  展示上传进度与结果，支持操作

10、上传后，支持删除吗？是否可以重新上传？

——  可删除或替换，不一定是删除按钮的方式体现，也可点击选择新图片进行替换，或者多张图片可以在图库中删减添加（参考朋友圈发图选图操作）

11、可以预览吗？需要缩略图吗？预览的规则是什么？可以编辑吗？

——  根据项目需求及使用场景，可以设计预览/编辑功能

△我想站酷大大也没有想过，会有一天以这种方式出现在自己的地盘

12、上传后的文件可以下载吗？多文件可批量下载吗？

——  无预览，需要确认是否正确文件时；上传后同步进行处理过的文件，如tinypng，png压缩后支持下载，且有一键下载功能

△tinypng网站支持png压缩，自动完成上传与压缩功能，减少用户操作

over，以上就是夺命连环问的最后一问。

那我们设计的时候需要体现出哪些因素呢？

• 上传入口

• 提示信息，限制条件等

• 上传中加载过程

• 文件名称

• 上传失败与成功提示

• 删除/替换功能

• 移入样式与反馈

• 缩略图展示

• 其他操作或展示信息

最后的最后，顺便补一些冷知识吧，或者对有些人也许是。热。。的。。。吧。。。。

冷？热知识？

1、惊！文件夹竟然支持上传

——主要是上传文件夹内部文件，不用单独选择（这个我刚知道，不知道是不是落伍了，具体操作可以去看Ant Design控件）

2、psd文件变png？

——psd文件在浏览器中上传：chrome浏览器会把他当成image，剪贴板会变成png格式上传，safari浏览器会当成file上传，剪切板不能粘贴该文件上传（这是从别处看到的，其实不太懂）

3、文件名有特殊字符或空格会无法下载及预览出错的问题

——这个主要是自己经常会忘记命名的事情

以上就是本次总结的全部了，第一次这么整理一个功能，说实话有点上瘾。

里面如果有不对的地方，希望各位大大能帮忙指出来，在此，先谢过各位了~