基于业务场景下的图片/文件上传方案总结(鍥剧墖涓婁紶瀛樺偍鏂规)

图片/文件上传组是企业项目开发中必不可少的环节之一，但是所有的用户模块都需要上传图片/文件，也是很多第三方组件库中(ant desigin，element ui)的基础组件之一。接下来，作者将带你从零开始实现一个图片/文件上传组件，并扩展一个更强大的上传组件。
你会收获的
常见的图片上传功能实现方案：手写一个图片/文件上传组件；如何将裁剪功能集成到上传组件中；如何在内容平台/可视化平台下扩展更强大的图片上传方案文本？
作为前端工程师，解决项目问题是我们的基本职责之一。我们可以用我们的知识去解决项目开发中的问题和需求，这是我们职业生涯的第一阶段，也就是3354适应期。要想继续晋级，需要不断打怪兽升级，掌握各种技能，这样才能在以后采用最佳方案高效解决问题，也就是第二阶段，3354发展期。
为了更快的进入发展期，我们需要不断提高自己的技术深度和广度。我们既可以纵向考虑问题的性质，也可以横向提出问题的多种解决方案，最后选择一个最优方案来实现。要做到这一点，我们需要对问题进行深入的思考和检讨。接下来，笔者将介绍几种常用的图片上传方案，以拓展我们的广度。
1.常见的图像上传方案
从web1.0时代开始，最常用的上传方案就是表单。我们只需要在form中编写各种输入元素，定义上传的服务器地址(action)即可。形式类似于下面的3360。
当XHR技术还没有普及的时候，我们大多数人都会选择上述方案。唯一的缺点是提交后页面会刷新，用户体验不是很好，还可能造成本地数据丢失。但是还是有一个解决方案，就是form iframe技术。
1.1表单iframe方案
form iframe方案的基本思想是我们的提交动作是在父页面上触发的，但是formform指向iframe，可以实现本地刷新。现在有些场景还是用这个方案，具体原理如下：3360。
以上两种方案都可以实现传统表单提交下的本地刷新功能，但第一种方案需要单独维护iframe表单，所以我一般采用第二种方案，兼容性可以达到IE9(虽然目前兼容IE浏览器的意义不大，但还是要了解一下)
1.2 ajax表单数据方案
XHR普及后，我们可以很容易地使用ajax实现异步请求。对于文件上传，我们也可以更灵活地使用ajax和formData，逐渐脱离对原生表单表单的依赖。FormData对象用于将数据编译成键值对，以便用XMLHttpRequest发送数据。它主要用于发送表单数据，但也可用于发送键控数据，与表单无关。如果表单的enctype属性设置为multipart/form-data，将使用表单的submit()方法发送数据，因此发送的数据具有相同的形式。
我们先来看一个使用formData 3360上传文件的简单例子。
let formData=new formData()；//HTML文件类型输入，formdata.append (‘userfile ‘，fileinputelement.files [0])由用户选择；let request=new XMLHttpRequest()；request.open(‘POST ‘，’ http://http://io . nainor . com/H5/form ‘)；request . send(formData)；短短五行代码，文件通过formData上传到服务器，不是很简单吗？我在之前的文章中用这个方案开发了一个基于react/vue的程序员朋友圈应用，有兴趣的可以研究一下。
如果上传多个文件非常简单，这里我们以axios为例，具体实现如下：3360。
const formData=new FormData()for(设I=0；I文件.长度；i ) { formData.append(`file_${i 1} `，files[i].file)}axios({ method: ‘post ‘，url: ‘/files/upload/tx ‘，data: formData，headers : { ‘ Content-Type ‘ : ‘ multipart/form-data ‘ })；在这里，我们应该注意在多文件上传请求的http头中将Content-Type设置为multipart/form-data。当然，你也可以基于上述原则实现更符合自己业务需求的文件上传组件，比如预览、限流等。
1.3第三方组件的实施
为了更高效快捷的开展业务，我们有时候可以选择第三方成熟的解决方案，比如antd的上传组件，比如element ui的上传组件。在这里，作者总结了几个有用且强大的解决方案，你可以3360感受一下。
antd/element的上传组件FilePond可以上传任何内容，并且可以优化图片以加快上传速度，同时提供流畅的用户体验。Vue-simple-uploader是百度WebFE(FEX)团队开发的一款基于HTML5的简单上传器，是一款以FLASH为补充的现代文件上传组件，是一款基于Vue的功能强大且美观的文件上传组件。我们可以通过上面提供的第三方组件库和自己服务器的配置，轻松实现一个强大的上传组件。
2.将裁剪功能集成到图片上传组件中。
至于图片上传组件，我们往往不确定用户上传的是什么，所以要提前进行限制，比如限制图片大小、图片格式、图片比例等。以达到我们的商业标准。对图像大小和图像格式的限制非常容易实现，但是我们不能指望用户自己处理这些，因为这样会大大增加用户使用网站的负担，所以我们可以提供一个功能，让用户在线剪切图像，如下图所示。
以上截图来自H5-门灵在线编辑器的图片上传组件。用户上传后，我们会看到图片剪辑界面，我们会指定图片的比例，让用户自由剪辑。我将用antd-img-crop使用基于antd的上传组件带你实现在线图片裁剪功能。具体代码如下：3360。
从“react”导入React、{ use state }；从“antd”导入{ Upload }；从“antd-img-crop”导入ImgCropconst Demo=()={ const [fileList，setfile list]=useState([{ uid : ‘-1 ‘，name: ‘image.png ‘，status: ‘done ‘，URL : ‘ https://zos . alipayobjects . com/rms portal/jkjgkevpupvyrjuimnivslzfwpnjuuz . png ‘，}，])；const onChange=({ file list : new file list })={ set file list(new file list)；};const on preview=async file={ let src=file . URL；如果(！src){ src=wait new Promise(resolve={ const reader=new FileReader()；reader . readasdataurl(file . originfilobj)；reader . onload=()=resolve(reader . result)；});} const image=新图像()；image.src=srcconst img window=window . open(src)；img window . document . write(image . outer html)；};return({ file list . length 5 ‘ Upload ‘ })；};ReactDOM.render(，mount node)；以上只是一个剪切上传图片的基本例子。当然，antd-img-crop还提供了更灵活的配置，方便我们设计出更灵活、更强大的切割效果。当然我们也可以用react-cropper来实现，它提供了更加灵活的裁剪控制和裁剪时的预览功能，如下图3360所示。
3.内容平台/可视化平台下的图像自治
对于内容平台或者可视化平台来说，单纯的上传图片是无法满足用户需求的，因为内容/可视化平台更注重图片的选择和使用，对图片的要求很高。毕竟用户自身上传资源有限，往往无法满足用户对内容发布或视觉设计的要求。因此，这类平台往往会提供图片素材库的功能，用户可以在素材库中搜索到大量的图片来满足自己的需求，这往往是留住用户的不二法门。
基于以上场景，产品经理往往会提出这样的需求。3360能提供替代方案吗？用户可以上传自己的图片，使用我们提供的图片库资源。这时候有经验的前端往往会说“3360安排”！
在设计这个函数之前，我们经常要参考其他现有的实现。下面是一些例子，如下图所示，
在上面的案例中，我们可以发现，用户上传图片时，会提供两个可选选项，一个是本地上传，一个是直接在图片库中选择，所以我们的方案是类似的。我们可以把图片库打包成文件上传组件作为通用功能，也可以组合打包，既可以单独使用，也可以组合使用。
对于H5-Dooring对图片库的封装，它是作为一个通用服务来实现的，即每当使用上传组件时，都会有一个可选的按钮从图片库中进行选择。实现方案也很简单，就是在上传组件中扩展一层，使用Modal Tab作为图片选择的界面，选择完成后手动设置图片的地址到上传组件。代码如下：3360
HandlegSelected=()={ const file list=[{ uid : uuid(8，16)，name3360′ H5门图片库’，status3360’ done ‘，URL 3360 this . state . curselected img，}，]；this . props . onchange this . props . onchange(file list)；this.setState({ fileList，wallmodalvisible : false })；};这里，使用了antd的表单组件的受控模式。
4.图像上传组件扩展
上面描述的方案对于基本的使用场景是完全够用的，但是如果是内容网站或者是可视化平台，因为我们的配置随时都有可能分发到公网，所以会涉及到内容安全的问题。如果用户配置了非法图片信息，可能会牵连到平台提供，所以我们也需要提供完整的审核机制。比如用户配置或发布内容后，需要经过审批才能正式发布到网上，但是完全依靠人工审批效率很低，所以这时候我们就需要寻找一种机器自动化的审批方案。比如阿里云、腾讯云都提供图像识别等服务，我们可以将这些服务集成到我们的组件中，实现真正的业务自主，从而更安全地进行企业管理和开发。
另一个要求是用户对上传的图片有编辑需求，我们也可以提供图片在线编辑功能，类似于下面的方案：
我们可以给用户设计和水印他们选择的图片的能力，这不是更有趣吗？
5.摘要
以上教程已经集成到H5-Dooring中，通过合理的设计可以实现一些更复杂的交互功能。可以自己探索学习。