vue项目里面怎么打开本地文件夹？

Question

在我的页面上我想看到这个路径下的这张图片（千万不要说通过img就行，请看清楚题目）， a标签我试了下，没成功。<input type="file">也只能显示个文件名字在页面上

Answer 1

首先你在浏览器里除了 <input type="file"> 以外是没有任何方法可以访问用户的文件系统的。

如果你想把 input file 里的图片显示在页面上的话可以像这样：

<img :src="previewImageSrc">

<input type="file" @change="displayImage" ref="fileInput">

displayImage() {

  const file = this.$refs.fileInput.files[0]

  const fr = new FileReader()

  fr.onload = (e) => {

    this.previewImageSrc = e.target.result

  }

  fr.readAsDataURL(file)

}

Answer 2

楼上正解，出于安全的考虑，浏览器本身是没有自主权力去访问用户文件系统的，只有<input type="file">且用户自主点击选择才可以访问到本地文件，且取到的文件也是无法获取文件的绝对路径的，只能知道文件名，以及封装的 file 对象，如果是图片的话可以通过 file 的 api 将图片读成 Base64 编码的 URL 显示到网页中实现图片的预览。