1、使用ajax上传
设置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)
})
2、input标签之file类型
(1)input标签之file类型
-
accept
指定选择文件类型的范围。默认为所有文件类型
图片为 accept=“image/*” -
capture
当文件类型为图片或视频且在移动端时,此属性才有意义。
capture = ‘user’ 调用前置摄像头
capture = ‘environment’ 调用后置摄像头
不设置则为用户自己选择 -
multiple
一个 Boolean 值,如果存在,则表示用户可以选择多个文件 -
files
返回一个 FileList,列出每个所选文件对象。除非 multiple 指定了属性,否则此列表只有一个成员。主要用于 JS 操作。
<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
}
3、FormData对象
FormData 对象的使用:
用一些键值对来模拟一系列表单控件:即把 form 中所有表单元素的 name 与 value 组装成 一个 queryString
异步上传二进制文件。
(1)构造函数 new FormData()
(2)方法 formData.append(name, value, filename)
- name:属性名
- value:属性值,在我们这里则指 file 数据
- filename:当第二个参数为 file 或 blob 时,告诉服务器的文件名。Blob 对象的默认文件名是
- List item
“blob”。File 对象的默认文件名 是文件的文件名。
// 继续使用上文的file
const formDate = new FormData()
formDate.append('userPicture', file, '1.jpg')
4、FileReader 对象:读取文件(实现图片预览)
FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
(1)、构造函数 new FileReader()
(2)、属性
- FileReader.readyState
表示 FileReader 状态的数字,取值如下
0:EMPTY/还没有加载任何数据
1:LOADING/数据正在被加载
2:DONE/已完成全部的读取请求 - FileReader.result
文件的内容。该属性仅在读取操作完成后才有效。
(3 )事件以及方法
- 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 设为读取的结果即可实现预览功能。
5、FileReader.readAsDataURL():将读取的文件转换为 base64 编码的字符串
就是上面所讲到的FileReader对象上的readAsDataURL()方法将读取的文件转化为base64编码的字符串