以往用到图片上传功能都是直接使用现成的插件, 今天把其中用到的知识点整理一下.
知识点字典
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 表单提交文件等方式, 可能不太自由. 诸位有兴趣的可以看一下.
原文再此
来源: https://juejin.im/post/5c2dd1855188257c30462962