使用浏览器File API, 即可读取本地图片,
使用FileReader即可预览图片,
使用FormData以及XMLHttpRequest对象即可上传图片
选择图片
首先要有个input
1 2
| <label for="input">选择图片</label> <input type="file" id="input" hidden accept="image/png, image/jpeg, image/gif, image/jpg" onchange="onSelectFile(this.files)">
|
其中multiple
可以多选, PC端(需要按shift
键), 及IOS是没问题的, 但安卓机普遍仍然是单选的.
accept
限定了所选文件的类型, 上面的写法表示只能选择图片. 当然也可以使用accept="image/*"
, 不过这种写法有可能会让文件选择框出现的慢一点
然后可以在onSelectFile
回调中获取FileList
对象
1 2 3 4 5
| onSelectFile (files) { console.log(files) }
|
要注意的是FileList
是个对象, 虽然有length
属性, 但不是数组, 不能使用forEach等方法来遍历
一个文件, 就files[0]
来获取; 多个文件的话, 老老实实用for循环就好了
另外, 还可以选择文件夹,
<input type="file" directory webkitdirectory/>
不过只在谷歌及火狐有效
文件上传
1 2 3 4 5 6 7 8 9 10 11 12
| var formData = new FormData() formData.append('file', file) var xhr = new XMLHttpRequest() xhr.open("post", uploadUrl, true) xhr.send(formData) xhr.onload = () => { }
|
上面的写法是一个请求上传一张图片, 如果多张图片, for循环就好了.
但多张图片的话, 如何知道何时全部上传成功?
一个笨方法是使用定时器, 定时检查已上传成功的图片数量是否与已选择的图片数量相等, 如果相等, 说明全部上传成功.
1 2 3 4 5 6
| let int = setInterval(() => { if (this.uploadedList.length == this.fileList.length) { this.$vux.loading.hide() clearInterval(int) } }, 300)
|
如果想知道上传进度, 可以监听XMLHttpRequest.upload
属性的progress
方法
1 2 3 4 5 6 7
| xhr.upload.onprogress = function (event) { if (event.lengthComputable) { var percentComplete = Math.round(event.loaded * 100 / event.total) console.log(percentComplete) } }
|
文件预览
1 2 3 4 5 6 7 8
| let reader = new FileReader(), file = files[index] reader.readAsDataURL(file) reader.onload = (e) => { }
|
参考资料
MDN
zhangxinxu