图片上传是前端开发中经常使用到的，上传方案也有很多种吧，可能你有在使用一些插件完成上传，（比如我以前自己写的一个后台系统）现在在这里总结下图片上传的解决方案。主要有一下几种：1.input 标签之 file 类型2.FileReader 对象：读取文件3.FileReader.readAsDataURL()：将读取的文件转换为 base64 编码的字符串4.FormData 对象5.使用 axios 上传input 标签之 file 类型当设置 input 标签 type 为 file 时，input 表现性状为上传文件样式file-input 有如下属性：accept指定选择文件类型的范围。默认为所有文件类型图片为 accept=”image/“文件类型取值见MDNcapture当文件类型为图片或视频且在移动端时，此属性才有意义。capture = ‘user’ 调用前置摄像头capture = ‘environment’ 调用后置摄像头不设置则为用户自己选择multiple一个 Boolean 值，如果存在，则表示用户可以选择多个文件files返回一个 FileList，列出每个所选文件对象。除非 multiple 指定了属性，否则此列表只有一个成员。主要用于 JS 操作。<!– html –><input type=“file” multiple id=“imgLocal” accept=“image/” />// jslet inp = document.querySelector(’#imgLocal’)inp.onchange = function(e) { let fileList = document.querySelector(’#imgLocal’).files console.log(fileList) //files}FileReader 对象我们用 FileReader 对象实现图片预览功能。FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。构造函数new FileReader()返回一个新构造的 FileReader。属性FileReader.readyState表示 FileReader 状态的数字，取值如下0：EMPTY/还没有加载任何数据1：LOADING/数据正在被加载2：DONE/已完成全部的读取请求FileReader.result文件的内容。该属性仅在读取操作完成后才有效。FileReader.error事件及方法我们主要是用 FileReader.onload 事件及 FileReader.readAsDataURL() 方法，其他见MDNFileReader.onload处理 load 事件。该事件在读取操作完成时触发FileReader.readAsDataURL()开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的字符串以表示所读取文件的内容。//继续使用上文的fileListlet file = fileList[0]const fileReader = new FileReader()fileReader.readAsDataURL(file) //读取图片fileReader.addEventListener(’load’, function() { // 读取完成 let res = fileReader.result // res是base64格式的图片})我们将 DOM 上 img 的 src 设为读取的结果即可实现预览功能。FormData 对象FormData 对象的使用：1.用一些键值对来模拟一系列表单控件：即把 form 中所有表单元素的 name 与 value 组装成一个 queryString2.异步上传二进制文件。构造函数new FormData()返回一个新构造的 FormData。方法FormData 方法有很多。我们这里只用了她的 append()方法formData.append(name, value, filename)name:属性名value:属性值，在我们这里则指 file 数据filename:当第二个参数为 file 或 blob 时，告诉服务器的文件名。Blob 对象的默认文件名是“blob”。File 对象的默认文件名 是文件的文件名。代码如下：// 继续使用上文的fileconst formDate = new FormData()formDate.append(‘userPicture’, file, ‘1.jpg’)使用 axios 上传大家都知道axios可以做数据请求，也可以实现图片上传的功能，主要是设置 header 中的 Content-Type//继续使用上文的formDatelet config = { headers: { ‘Content-Type’: ‘multipart/form-data’ }}axios .post(‘serverUrl’, formDate, config) .then(res => { console.log(res) }) .catch(err => { console.log(err) })axios 也可以使用onUploadProgress监听上传进度，不再赘述。其他其他还有直接form表单提交文件等方式，可能不太自由。诸位有兴趣的可以看一下。