图片上传在前端开发中经常用到。上传解决方案也有很多。可能你在使用一些插件上传，（比如我之前自己写的一个后台系统），现在在这里总结一下上传图片的解决方法。主要有以下几种类型：1.输入标签的文件类型2.FileReader对象：读取文件3.FileReader.readAsDataURL()：将读取的文件转换成base64编码的字符串4.FormData对象5.使用axios上传的文件类型input标签的类型当input标签类型设置为file时，input表现为上传的文件样式file-input有如下属性：accept指定选择文件类型的范围。默认为所有文件类型。图片为文件类型accept="image/*"。有关文件类型的值，请参阅MDNcapture。该属性只有在文件类型为图片或视频且在移动端时才有意义。capture='user'调用前置摄像头capture='environment'调用后置摄像头如果不设置，为用户选择多个一个布尔值，如果存在，则表示用户可以选择多个文件返回一个FileList，列出每个选定的文件对象。除非指定了multiple属性，否则此列表只有一个成员。主要用于JS操作。//jsletinp=document.querySelector('#imgLocal')inp.onchange=function(e){letfileList=document.querySelector('#imgLocal').filesconsole.log(fileList)//files}FileReader对象我们使用FileReader对象来实现图片预览功能。FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。构造函数newFileReader()返回一个新构造的FileReader。属性FileReader.readyState表示FileReader状态的个数，取值如下：0：EMPTY/尚未加载数据1：LOADING/数据正在加载2：DONE/已完成所有读取请求FileReader.result文件的内容。此属性仅在读取操作完成后才有效。FileReader.error事件和方法我们主要使用FileReader.onload事件和FileReader.readAsDataURL()方法，其他处理load事件见MDNFileReader.onload。当读取操作完成时，此事件触发FileReader.readAsDataURL()开始读取指定Blob的内容。完成后，result属性将包含一个data:URL格式的字符串，表示读取的文件的内容。//继续使用上面的fileListletfile=fileList[0]constfileReader=newFileReader()fileReader.readAsDataURL(file)//读取图片fileReader.addEventListener('load',function(){//读取完成letres=fileReader.result//res为base64格式的图片})我们将DOM上img的src设置为读取的结果，实现预览功能。FormData对象的使用FormData对象：1、使用一些键值对模拟一系列的表单控件：即将表单中所有表单元素的名称和值组装成一个queryString2、异步上传二进制文件。构造函数newFormData()返回一个新构造的FormData。方法FormData方法有很多。我们只使用她的append()方法formData.append(name,value,filename)name:属性名value:属性值，这里我们指的是文件数据filename:当第二个参数是file或者blob时，告诉服务器这个文件名。Blob对象的默认文件名是“blob”。File对象的默认文件名是文件的文件名。代码如下：//继续使用上面的fileconstformDate=newFormData()formDate.append('userPicture',file,'1.jpg')使用axios上传我们都知道axios可以做数据请求和上传图片功能主要是设置header中的Content-Type//继续使用上面的formDateletconfig={headers:{'Content-Type':'multipart/form-data'}}axios.post('serverUrl',formDate,config).then(res=>{console.log(res)}).catch(err=>{console.log(err)})axios也可以使用onUploadProgress监控上传进度，所以我赢了在这里重复一遍。还有其他方法比如直接表单提交文件，可能不是很免费。有兴趣的可以看看。如果您觉得文章还不错，请点个赞，您的认可就是我的动力！
