接了一个「常规」需求：开发一个本地上传图片控件，需要支持三种上传方式：

支持打开本地目录，选择本地图片上传 支持拖曳图片上传 支持微信截图上传

我们先从工程角度来看一下用户上传图片的流程是怎样子的：

用户选择了一张本地图片，或者拖曳了一张图片，或者通过微信截图了一张图片。这时，我们需要知道用户所选择图片的信息，比如图片的内容、图片的大小、图片的类型等。 用户上传图片。这时，我们需要保存图片。 用户查看图片。这时，我们需要把第2步中保存的图片展示给用户。

如何获取到图片信息

通过input 打开本地目录，选择本地图片上传

通过type为file的input标签选择本地图片上传，每次选择不同图片的时候会触发onChange事件。为什么我要强调不同图片，因为当两次选择的图片是一样的情况下，onChange事件无法触发。解决方法：每次处理完后手动置空input的value。

<input id=img-input type=file accept=image/* onChange={this.bindChooseEvents} />  // 置空input value   clearImgInputValue () {     document.getElementById(img-input).value =    }   bindChooseEvents = (e) => {     console.log(choose a image)     // 获取File对象     const file = e.target.files[0]     let size = file.size     if (!file.type.match(image.*)) {       AntMessage.warning(File\s type is not supported. Images only.)       this.clearImgInputValue()       return;     }     if (size > maxSize) {       AntMessage.warning(The size of the image is too large)       this.clearImgInputValue()       return;     }     /* eslint-disable */     const reader = new FileReader()  // FileReader     /* eslint-disable */     // 将图片转换为base64     reader.readAsDataURL(file)     reader.onload = (arg) => {       // 获取到base64图片内容       const fileStream = arg.target.result       /**        * overwrite do something        * */       this.clearImgInputValue()     }   } 

拖曳图片上传

监听拖曳事件，通过拖曳相关的DataTransfer对象获取图片信息。

<div id=drop-zone style={{width: 100px, height: 100px}}>Drop Zone</div> bindDragEvents = (e) => {     const handleDragOver = (event) => {       event.stopPropagation()       event.preventDefault()       event.dataTransfer.dropEffect = copy     }     // 必须阻止dragenter和dragover事件的默认行为，这样才能触发 drop 事件     const handleFileSelect = (event) => {       event.stopPropagation()       event.preventDefault()       const files = event.dataTransfer.files // 文件对象       const file = files[0]       const size = file.size       const type = file.type       if (!type.match(image.*)) {         AntMessage.warning(File\s type is not supported. Images only.)         return;       }       if (size > maxSize) {         AntMessage.warning(The size of the image is too large)         return;       }       /* eslint-disable */       const reader = new FileReader()       /* eslint-disable */       // 将图片转换为base64       reader.readAsDataURL(file)       reader.onload = (arg) => {         // 获取到base64图片内容         const fileStream = arg.target.result         /**          * overwrite do something          * */       }     }     const dropZone = document.getElementById(drop-zone);     dropZone.addEventListener(dragover, handleDragOver, false);     dropZone.addEventListener(drop, handleFileSelect, false);   } 

微信截图上传

监听paste事件，通过剪贴板对象clipboardData获取图片信息。

bindClipEvents() {     document.addEventListener(paste, (e) => {       console.log(paste a image)       const clipboard = e.clipboardData       // 有无内容       if (!clipboard.items || !clipboard.items.length) {         AntMessage.warning(No content in the clipboard)         return;       }       let item = clipboard.items[0]       if (item.kind === file && item.type.match(image.*)) {           // 获取图片文件           let imgFile = item.getAsFile()           if (imgFile.size > maxSize) {             AntMessage.warning(The size of the image is too large)             return;           }           const reader = new FileReader()           // 将图片转换为base64           reader.readAsDataURL(imgFile)           reader.onload = (arg) => {             // 获取到base64图片内容             const fileStream = arg.target.result             /**              * overwrite do something              * */           }       } else {         AntMessage.warning(File\s type is not supported. Images only.)       }     }, false)   } 

如何保存

图片保存一般都采用独立图片独立域名服务器，不会傻乎乎地把图片保存在web服务器上也不会直接存在项目表的数据库中。这样做有什么好处呢？

图片访问是I/O密集型操作，很消耗服务器资源，从Web服务器独立出来后，能够减少Web服务器压力 便于扩容、容灾和数据迁移 浏览器有同域名下的并发策略限制 请求图片一般并不需要cookie，但是浏览器发起的所有同域名请求时，http头部都会自动带上cookie信息，导致浪费带宽 方便对图片访问做负载均衡，可以对图片应用各种缓存策略 方便迁移CDN ...

总结&优化

流程图：

不足:

项目实践中我们虽然采用了独立图片服务器，下载过程只是通过Web服务器去数据库拿到图片地址，但是我们的上传操作仍旧经过了Web服务器，需要Web服务器上的应用程序来处理，所以上传过程仍旧对Web服务器造成压力。所幸的是，我们对图片上传大小进行了1M的大小限制，同时作为内部系统没啥访问压力，而且图片上传功能也并不是很高发的行为，所以这么做基本也不会有啥问题。但是最好的方案还是不管下载上传都直接走独立图片服务器，避免对Web服务器造成额外的压力。