共计 2080 个字符，预计需要花费 6 分钟才能阅读完成。
以往用到图片上传功能都是直接使用现成的插件，今天把其中用到的知识点整理一下。
知识点字典
input 标签之 file 类型
FileReader 对象：读取文件
FileReader.readAsDataURL()：将读取的文件转换为 base64 编码的字符串
FormData 对象
使用 axios 上传
input 标签之 file 类型
当设置 input 标签 type 为 file 时，input 表现性状为上传文件样式
file-input 有如下属性：
accept 指定选择文件类型的范围。默认为所有文件类型 图片为 accept=”image/*” 文件类型取值见 MDN
capture 当文件类型为图片或视频且在移动端时，此属性才有意义。
capture = ‘user’ 调用前置摄像头
capture = ‘environment’ 调用后置摄像头
不设置则为用户自己选择
multiple 一个 Boolean 值，如果存在，则表示用户可以选择多个文件
files 返回一个 FileList，列出每个所选文件对象。除非 multiple 指定了属性，否则此列表只有一个成员。主要用于 JS 操作。
<!– html –>
<input type=”file” multiple id=”imgLocal” accept=”image/*” />
// js
let 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() 方法，其他见 MDN
FileReader.onload 处理 load 事件。该事件在读取操作完成时触发
FileReader.readAsDataURL() 开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的字符串以表示所读取文件的内容。
// 继续使用上文的 fileList
let 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 对象的使用：
用一些键值对来模拟一系列表单控件：即把 form 中所有表单元素的 name 与 value 组装成一个 queryString
异步上传二进制文件。
构造函数
new FormData()
返回一个新构造的 FormData。
方法
FormData 方法有很多。我们这里只用了她的 append() 方法
formData.append(name, value, filename)
name: 属性名
value: 属性值，在我们这里则指 file 数据
filename: 当第二个参数为 file 或 blob 时，告诉服务器的文件名。Blob 对象的默认文件名是“blob”。File 对象的默认文件名 是文件的文件名。
// 继续使用上文的 file
const formDate = new FormData()
formDate.append(‘userPicture’, file, ‘1.jpg’)
使用 axios 上传
主要是设置 header 中的 Content-Type
直接上代码
// 继续使用上文的 formDate
let 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 表单提交文件等方式，可能不太自由。诸位有兴趣的可以看一下。
