浏览器预览本地资源文件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36091581/article/details/80282962

浏览器预览本地资源文件

由于浏览器安全策略的限制，javascript程序不能自由地访问本地资源，这是对用户信息安全来说，是一项不得不遵守的准则。假如网络上的javascript程序可以自如地访问用户主机的本地资源，那么浏览器用户将毫无安全可言。尽管有这个安全限制，但是在得到用户允许的情况下，浏览器还是可以访问本地资源的。

获得用户允许的方法就是通过标签来让用户手动选择文件，这一过程就是用户授予访问权限的过程。

例如：

<input type="file" ref="picers" accept="image/*" @change="picEvent"/>

我们设置一个input输入框，类型是文件，指定只能上传图片类型的限制。并添加了一个事件去监听获取了哪一张图片。

调用方法

picEvent (e) {
    if (e.target.files[0]) {
        getObjectURL(e.target.files[0])
      }
}

// 获取本地图片路径转换
exports.getObjectURL = function (file) {
  var url = null
  if (window.createObjectURL !== undefined) { // basic
    url = window.createObjectURL(file)
  } else if (window.URL !== undefined) { // mozilla(firefox)
    url = window.URL.createObjectURL(file)
  } else if (window.webkitURL !== undefined) { // webkit or chrome
    url = window.webkitURL.createObjectURL(file)
  }
  return url
}

window.createObjectURL是什么呢？

概述
创建一个新的对象URL,该对象URL可以代表某一个指定的File对象或Blob对象.

语法
objectURL = window.URL.createObjectURL(blob);
blob参数是一个File对象或者Blob对象.
objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容.

附注
在每次调用createObjectURL()方 法的时候,都会创建一个新的对象URL,即使参数中的这个对象已经有了自己的对象URL.在你不需要这些对象URL的时候,你应该通过调用 window.URL.revokeObjectURL()方法来释放它们所占用的内容.虽然即使你不主动释放它们,浏览 器也会在当前文档被卸载的时候替你释放,不过,考虑到更好的性能和更少的内存占用,你应该在安全的时候主动施放它们.

浏览器兼容性