vue上传文件（图片），并预览图片的方法（不使用第三方库）

+思路：
1.点击 input标签，打开文件库，点选图片后，执行uploadFile($event)函数 .注意：要是change事件

2.在uploadFile($event)函数中读取图片文件，拿到base64文件，直接给img标签的src属性，图片即可预览
3.图片上传，要将图片转成formData格式发送请求给后台

• 代码
  HTML代码：

     <div class="alert-box-item" >
          拍照
          <input  @change="uploadFile($event)" type="file">  //用来打开手机或者电脑端的文件，然后读取文件
           <img :src=valueUrl  v-if="valueUrl"> // 预览图片用
        </div>
  

js代码：

uploadFile (el) {
      if (!el.target.files[0].size) return; // 如果文件大小为0，则返回
      if (el.target.files[0].type.indexOf('image') === -1) { //如果不是图片格式
        // this.$dialog.toast({ mes: '请选择图片文件' });
        console.log('请选择图片文件');
      } else {
        const that = this;
        const reader = new FileReader(); // 创建读取文件对象
        reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件
        reader.onload = function () {  // 文件读取完成后
          // 读取完成后，将结果赋值给img的src
          that.valueUrl = this.result;
          // console.log(this.result);
        };
        const uid = 'e0c9dd3de0418e698d49984ae035992a'; //后台需要的参数
        const formData = new FormData();  // 创建一个formdata对象
        formData.append('res', el.target.files[0]); 
        formData.append('uid', uid);
        postUploadFile(formData).then(res => {  // 发送请求，保存图片
          if (res.status === 0) {
            this.valueUrl = res.data;
          } else {
            console.log(res);
          }
        });
      }
    },