文件图片上传+预览

1. 基本结构

<div>
  文件上传：
  <input type="file" value="" id="file" accept="image/*" />
  <img alt="暂无图片" id="myImg" style="width: 50px;"></img>
  <button id="upload">上传</button>
</div>

上边要注意的就是input中的accept属性，其代表上传文件的一个限制，这里的image/*代表支持图片的书友格式，如果想支持jpeg的可以写成accept="image/jpeg"。也可以同时支持多种图片格式，如下：

<input type="file" accept="image/jpeg, image/png, 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;
       }

    }

效果如下：