以前都是直接使用现成的插件来使用图片上传功能。今天就把其中用到的知识点整理一下。知识点字典输入标签的文件类型FileReader对象：读取文件FileReader.readAsDataURL()：将读取的文件转换为base64编码的字符串FormData对象在设置输入标签类型时使用axios上传输入标签的文件类型tofile,input的表现是上传文件样式file-input有如下属性：accept指定选择文件类型的范围。默认为所有文件类型。Imageisaccept="image/*"文件类型取值参见MDNcapture该属性只有当文件类型为image或video且在移动端时才有意义。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对象：使用一些键值对来模拟一系列的表单控件：即将表单中所有表单元素的名称和值组装成一个queryString来异步上传二进制文件。构造函数newFormData()返回一个新构造的FormData。方法FormData方法有很多。我们只使用她的append()方法formData.append(name,value,filename)name:属性名value:属性值，这里我们指的是文件数据filename:当第二个参数是file或者blob时，告诉服务器这个文件名。Blob对象的默认文件名是“blob”。File对象的默认文件名是文件的文件名。//继续使用上面的文件constformDate=newFormData()formDate.append('userPicture',file,'1.jpg')uploadusingaxios主要是在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监控上传进度，这里不再赘述。还有其他方法比如直接表单提交文件，可能不是很免费。有兴趣的可以看看。
