iView上传图片实现本地预览，上传前删除功能

一直以来，JS都没有比较好的可以直接处理二进制的方法。而Blob的存在，允许我们可以通过JS直接操作二进制数据。

一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob，继承了Blob的功能,并且扩展支持了用户计算机上的本地文件。

Blob对象可以看做是存放二进制数据的容器，此外还可以通过Blob设置二进制数据的MIME类型。

看代码

    <div class="upload-content">
      <Upload
              ref="uploadImg"
              :headers="headers"
              action="http://template.ecois.info/image/upload"
              :show-upload-list="false"
              :format="['jpg','jpeg','png']"
              v-show="!updSrc"
              :before-upload="handleUpload"
              >
        <div class="upload-c">
          <div class="upload-plus"></div>
          <div class="upload-txt">点击添加图片</div>
        </div>
      </Upload>
      <div class="upd-img" v-show="updSrc">
        <img :src="updSrc" alt="">
      </div>
      <div v-for="(item, index) in file" class="align-r">
          <a href="javascript:;"  @click="removeFile(item.keyID)">X</a>
       </div>
    </div>

  methods: {
    handleUpload (file) { // 上传文件前的事件钩子
      // 选择文件后 这里判断文件类型 保存文件 自定义一个keyid 值 方便后面删除操作
      let keyID = Math.random().toString().substr(2);
      file['keyID'] = keyID;
      // 保存文件到总展示文件数据里
      this.file.push(file);
      //利用Blob预览本地上传的图片
      this.handlePreview();
      // 返回 false 停止自动上传 我们需要手动上传
      return false;
    },
    removeFile (keyID) { 
      // 删除总展示文件里的当前文件
      this.file = this.file.filter(item => {
        return item.keyID != keyID
      })
      this.updSrc = ""
    },
    handlePreview(){
       const self = this;
       const reader = new FileReader();
			 reader.readAsArrayBuffer(this.file[0]);
  			reader.onload=function(e){
  				const bf = this.result;
  				const blob = new Blob([bf],{type:"text/plain"});
          const str = URL.createObjectURL(blob);
  			  self.updSrc = str;
  		 };
    },
    upload () { // 上传文件
      this.$refs.uploadImg.post(this.file[0]);
    }
  }