URL.createObjectURL 的使用方法

标签：预览 URL imgFile createObjectURL file 方法 图片

使用场景：点击图片预览图片的时候，用于生成一个临时的预览地址 ；

imgFile 是？？ 使用 input  type = file 选择的图片

const imgFile = this.$refs.imgFile.files[0]; // 接口需要的参数 file类型的图片 ;

• 通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串 ;

• 通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL

创建一个新的对象URL，该对象URL可以代表某一个指定的file对象或者bold对象。

可以用于在浏览器上预览本地的图片或者视频。

URL对象是硬盘（SD卡等）指向的一个文件路径，如果我们做文件上传的时候，想在没有上传服务器端的情况下看到上传图片的效果图的时候，就可以通过var url = window.URL.createObjectURL(files[0])；获得一个http格式的url路径，这个时候就可以设置img中的src进行显示了。

input 选择图片文件 ：

 <!-- multiple 属性可以选择多个文件上传 -->
    <input type="file" name="" id="" ref="imgFile" @change="changeFile" />

然后触发changeFIle 方法 ：

  changeFile() {
      console.dir(this.$refs.imgFile.files); // filelist对象
      const imgFile = this.$refs.imgFile.files[0]; // 接口需要的参数 file类型的图片
      console.log(imgFile.size);
      if (imgFile.size > 1024 * 1024 * 2)
        return this.$toast.fail("不允许超过 2 M");
      const typeArr = ["image/png", "image/jpeg", "image/git", "image/jpg"];
      if (!typeArr.includes(imgFile.type))
        return this.$toast.fail("只支持jpg，png，jpeg，gif格式");
      // 生成预览图片地址：通过js将文件信息在本地电脑内存中变成一个预览地址临时拿去使用显示
      this.imgUrl = URL.createObjectURL(imgFile);
      console.log(this.imgUrl); // blob:http://localhost:8080/5262140a-02db-4106-b651-b2fc98a5e8e9
    },

 

 // 生成预览图片地址：通过js将文件信息在本地电脑内存中变成一个预览地址临时拿去使用显示
      this.imgUrl = URL.createObjectURL(imgFile);
      console.log(this.imgUrl); // blob:http://localhost:8080/5262140a-02db-4106-b651-b2fc98a5e8e9

URL.createObjectURL(blob)和FileReader.readAsDataURL(file) 很类似 ；

标签：预览,URL,imgFile,createObjectURL,file,方法,图片
From： https://www.cnblogs.com/zhulongxu/p/16803861.html