链接：https://juejin.cn/post/6844903864999772174
解决问题:
1.普通js上传一张图片2.普通js上传一张图片，提前预览。然后再决定是否上传。3.普通js一次上传多张图片。
知识点:
*FormData对象的使用(上传图片)*FileReader对象的使用(转换成base64可被预览)1.普通js上传一张图片
HTML代码:
需要一个input:file图片上传控件
<inputtype=”file”class=”file”name=”file”/>
JS代码:
image
别慌。因为对象的特殊，file对象是不会被开发人员所直接捕获(可见)的。但确实存在。这个对象有一个files属性，返回的就是FileList对象。FileList对象看起来和数组一样，但不是数组，不能使用forEach，但是有length属性
image
可以通过FileList.item(0) 或 FileList[0] 获取对应的第1个file对象
3.将单个图片对象放到FormData中。使用FormData的append方法。
注意: 对于加入图片对象时: append()方法强烈建议使用三个参数的方法(2个参数的传递图片时，可能出现问题)。分别是 （键名，图片对象，图片名称） 普通的键值对可以使用append(key,value)即可
4.完成了，就是这么简单。使用你熟悉的jq/axios/自己封装的ajax发到后台吧。
document.querySelector(‘.file’).addEventListener(‘change’,function(e){//1.可以通过this拿到这个file的DOM元素console.log(this)//1. e 函数事件参数对象中也有这个file的DOM元素对象。使用e.target也可以直接拿到console.log(e.target)//对开发人员屏蔽，所以直接必须调用这个文件的DOM对象的files属性，返回一个数组letfiles=e.target.filesconsole.log(files)//console.log(files.item(0))//console.log(files[0])//判断一手是否有文件if(!files.length)return//上传文件创建FormDataletformData=newFormData()//upFile就是后台接收的keyformData.append(‘upFile’,files[0],files[0].name)//将formdata发送到后台即可//我用的axios.post(‘url’,formData)})2.普通js上传一张图片，提前预览。然后再决定是否上传
相比上面那个一键上传的功能，不能预览的功能你很不爽吧。很多时候就是要先预览下本地的图片，但是还不能上传到图片服务器占内存…. HTML代码:
多了一个图片标签
<inputtype=”file”class=”file”name=”file”/><imgsrc=””alt=””/>
JS代码:直接提供一个将file对象转base64方法。你只需要在获取file对象后，先不着急封装到FormData中，先转base64看看效果，再做接下来操作
/**将file对象转化为base64编码*file目标file对象*/functionpreviewFile(file){letreaderif(file){//创建流对象reader=newFileReader()reader.readAsDataURL(file)}//捕获转换完毕reader.onload=function(e){//转换后的base64就在e.target.result里面,直接放到img标签的src属性即可document.querySelector(‘img’).src=e.target.result}}3.普通js一次上传多张图片。
大概是这个样子，用户可以按住Ctrl或Shift可以一次选择多张。
1.HTML的input:file控件中多一个multiple属性
HTML代码:
<inputtype=”file”class=”file”name=”file”multiple=”multiple”/>
JS代码:
这里需要注意下的是FormData的append方法。相同的key，是会自动追加的，并不会覆盖，但注意需要使用getAll()才能完整获取查看，get()和querySelector只获取第一个类似
获取到的formData中file数组是这个效果
document.querySelector(‘.file’).addEventListener(‘change’,function(e){letfiles=e.target.filesif(!files.length)return//上传文件创建FormDataletformData=newFormData()//遍历FileList对象，拿到多个图片对象for(leti=0;i<files.length;i ){//formData中的append方法如果已有相同的键，则会追加成为一个数组注意:这里需要使用formData.getAll()获取formData.append(‘upFile’,files[i],files[i].name)}console.log(formData.getAll(‘upFile’))//将formdata发送到后台即可//我用的axios.post(‘url’,formData)})总结:总体来说就是一些API的使用，另外还需要注意一些细节，例如判定该file对象是否是图片，判定图片的类型、大小等。可在file对象的 属性查看。本文的传输方式统一采用ajax异步，如需采用原生表单同步发送，只需要在FORM属性上加一个enctype=”multipart/form-data” 即可关于图片相关的还有一个压缩也是个重要问题(很多时候上传都是由大小限制的)。这个暂时没有总结…大体是canvas压缩，大家可以根据需要自行搜一把，github上也有很多封装好的。推荐阅读
面试官：JS清空数组的三种方式
前端 api 请求缓存的 5 种方案，减少性能损耗！
实现浏览器中的最大请求并发数控制
Axios取消请求总结篇
解决移动端1px问题的六种方案
????爱心三连击
