图片预览的两种方式

图片预览的两种方式

1.H5 新增方法 FileReader（） 可以传递给后台

const fr = new FileReader();
fr.readAsDataURL(file[0]);
fr.onload = (e) => {
  this.addForm.cover_img = e.target.result;
  this.$refs.img.setAttribute("src", e.target.result);
  // console.log(e.target.result)
  this.$refs.form.validateField("cover_img");
};

2. H5 新增方法 URL 不可以传递给后台，因为他生成的是一个临时内存

 ChooseCoverImg (e) {
      const file = e.target.files
      if (file.length > 0) {
        this.addForm.cover_img = file[0]
        const url = URL.createObjectURL(file[0])
        this.$refs.img.setAttribute('src', url)
      } else {
        this.addForm.cover_img = null
        this.$refs.img.setAttribute('src', defaultimg)
      }
      this.$refs.form.validateField('cover_img')
    },