网站内容管理系统上传图片( 从零实现一款图片/文件上传组件以及扩展出更强大的上传方案)

　　网站内容管理系统上传图片(

从零实现一款图片/文件上传组件以及扩展出更强大的上传方案)

　　前言

　　图片/文件上传组是企业项目开发中必不可少的环节之一，但是所有的用户模块都会有图片/文件上传的需求，也是很多第三方组件库（ant desigin, element ui) 一. 接下来笔者将带大家从头实现一个图片/文件上传组件，扩展一个更强大的上传组件。

　　你会收获文字

　　作为前端工程师，解决项目问题是我们的基本职责之一。我们可以利用所获得的知识来解决项目开发中的问题和需求。这也是我们职业生涯的第一个阶段，即————适应期。想要继续晋升，就需要不断的提升和掌握各种技能，这样才能在以后遇到问题的时候用最好的方案高效的解决问题，也就是第二阶段——发展期。

　　为了更快地进入发展期，我们需要不断提升自身技术的深度和广度。我们可以纵向考虑问题的性质，横向提出问题的多个解决方案，最后选择一个最优解来实现。要做到这一点，我们需要深入思考，检讨问题。接下来，笔者将介绍几种常用的图片上传方案，以扩大大家的广度。

　　1. 常用图片上传方案

　　从web1.0时*敏*感*词*始，最常用的上传方案就是表单形式。我们只需要在表单中写入各种输入（输入元素），并定义上传服务器地址（动作）。是的，格式类似于以下内容：

　　当XHR技术不流行时，我们大多选择上述方案。唯一的缺点是提交后页面会刷新。用户体验不好，可能会造成部分数据丢失，但还是有一个解决方案，就是form+iframe技术。

　　1.1个表单+iframe计划

　　form+iframe方案的基本思路是我们的提交动作是在父页面触发的，但是form表单指向iframe，可以实现部分刷新。现在一些场景仍然使用这种解决方案。具体原则如下：

　　以上两种方案都可以实现传统表单提交下的部分刷新功能，但是方案一需要单独维护iframe表单，所以我一般使用方案二，兼容性可以达到IE9（虽然目前兼容IE浏览器） ）不大，但还是要懂）

　　1.2 ajax + formData 解决方案

　　XHR流行之后，我们可以很方便的使用ajax来实现异步请求。对于文件上传，我们也可以更灵活地使用ajax和formData来实现，逐步摆脱对原生表单的依赖。

　　我们先来看一个简单的使用formData上传文件的例子：

　　let formData = new FormData();  // HTML 文件类型input，由用户选择 formData.append("userfile", fileInputElement.files[0]);  let request = new XMLHttpRequest(); request.open("POST", "http://http://io.nainor.com/h5/form"); request.send(formData); 

　　上面仅仅5行代码就实现了通过formData将文件上传到服务器，是不是很简单？作者之前基于react/vue开发的文章，专门为程序员开发了一个朋友圈应用。本课程结束后，有兴趣者可自行研究学习。

　　实现多文件上传也很简单。这里我们以axios为例，具体实现如下：

　　const formData = new FormData() for(let i=0; i {   const [fileList, setFileList] = useState([     {       uid: '-1',       name: 'image.png',       status: 'done',       url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',     },   ]);    const onChange = ({ fileList: newFileList }) => {     setFileList(newFileList);   };    const onPreview = async file => {     let src = file.url;     if (!src) {       src = await new Promise(resolve => {         const reader = new FileReader();         reader.readAsDataURL(file.originFileObj);         reader.onload = () => resolve(reader.result);       });     }     const image = new Image();     image.src = src;     const imgWindow = window.open(src);     imgWindow.document.write(image.outerHTML);   };    return (                     {fileList.length  {   const fileList = [     {       uid: uuid(8, 16),       name: 'h5-dooring图片库',       status: 'done',       url: this.state.curSelectedImg,     },   ];   this.props.onChange && this.props.onChange(fileList);   this.setState({ fileList, wallModalVisible: false }); }; 

　　这里使用的是antd的form组件的受控方式。

　　4. 图片上传组件扩展

　　上述方案对于基本的使用场景完全够用，但是如果是内容网站或者可视化构建平台，由于我们的配置随时可能分发到公网，这就涉及到内容安全问题，如果用户一旦配置了违法的图片信息，就有可能牵连到平台提供，所以我们也需要提供完善的审核机制。但是单纯依靠人工审核的效率比较低，所以这个时候就需要寻找机器自动化的审核方案。比如阿里云和腾讯云提供图像识别等服务，我们可以将这些服务集成到我们的组件中，从而实现真正的业务自主，从而更安全地进行企业运营和发展。

　　另一个需求是用户对上传的图片有编辑需求。我们也可以提供图片的在线编辑功能，类似下面的解决方案：

　　我们可以让用户自己设计图片，加水印等等，这样更有意思吗？

　　5. 总结

　　以上教程作者已经集成到H5-Dooring中。对于一些比较复杂的交互功能，也可以通过合理的设计来实现。你可以自己探索和学习。