嗨小伙伴们你们假期好～
今天小编给你们带来的文章是图片上传功能设计的时侯须要考虑的诱因，本篇文章是作者在完成项目的时侯，在图片上传模块遇见了一系列的问题，有些问题开始时也没有想过，于是总结下来分享给你们，一起来瞧瞧吧！
（全文共计3209字，阅读约须要9分钟）
文件上传
首先上传文件分为好多种，比如说是文档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压缩，自动完成上传与压缩功能，减少用户操作
那我们设计的时侯须要彰显出什么诱因呢？
最后的最后，顺便补一些冷知识吧，或者对有些人其实是。热。。的。。。吧。。。。
冷？热知识？
1、惊！文件夹居然支持上传
——主要是上传文件夹内部文件，不用单独选择（这个我刚晓得，不知道是不是落伍了，具体操作可以去看Ant Design控件）
2、psd文件变png？——psd文件在浏览器中上传：chrome浏览器会把他当作image，剪贴板会弄成png格式上传，safari浏览器会当作file上传，剪切板不能粘贴该文件上传（这是从别处看见的，其实不太懂）
3、文件名有特殊字符或空格会难以下载及预览出错的问题——这个主要是自己常常会忘掉命名的事情
以上就是本次总结的全部了，第一次如此整理一个功能，说实话有点上瘾。里面假如有不对的地方，希望诸位大大能帮忙指下来，在此，先谢过诸位了~
小编：@Kerr Xu
作者早已授权本公众号发布
