- 基本结构
` ``
文件上传：
`
上边要注意的就是input中的accept属性，其代表上传文件的一个限制，这里的image/*代表支持图片的书友格式，如果想支持jpeg的可以写成accept="image/jpeg"。也可以同时支持多种图片
格式，如下：
<input type="file" accept="image/jpeg, image/png, image/gif, image/bmp, image/webp">
这里的文件上传时HTML5新增的特性，可以先判断一下浏览器是否支持
var files = input.files ? input.files : []; if (!files.length || !window.FileList) { console.log('浏览器不支持'); return false; }
2.上传文件
① 获取数据
这里可以通过formData将文件转成二进制数据(流)，利用append存进去
② 再利用axios请求传给后端
upload.onclick = function () { var fd = new FromData(); fd.append('file', files[0]); var req = new XMLHttpRequest(); req.open('post', '要请求的URL'); req.send(fd); req.onreadystatechange = function () { if (req.readyState === 4 && req.status === 200) { alert('上传成功'); } } }
注意：这里执行send时，如果使用的get就不用传递参数，如果是post就需要send传进去了。
3.图片预览
① 利用e.target获取文件对象
② 利用FileReader进行展示,FileReader是一种异步文件的读取，他还有一个重要的方法readAsDataURL可以把文件转成base64,完成上述读取后会触发其onload事件，就可以拿到该事件的
event.target.result去展示图片。
` file.onchange = function (e) {
// 获取文件
var file = e.target.files[0];
var rea = new FileReader();
rea.readAsDataURL(file);
// 数据读取完成触发
rea.onload = function (event) {
console.log('event::', event)
myImg.src = event.target.result;
}
}`