Vue如何打开文件选择窗，然后读取选择文件的内容呢？

悬赏园豆：20 [已解决问题] 解决于 2022-09-09 13:30

就像这样
选择一个文本文件，然后打开，文件里的内容

页面组件用的是element-ui的东西

Vue 文件读取

echo_lovely | 小虾三级 | 园豆：1507
提问于：2022-09-08 13:48

< >

最佳答案

它方法里的api的file参数就是文件相关的信息了

收获园豆：8

你风致 | 老鸟四级 |园豆：2215 | 2022-09-08 14:23

你指的是使用element-ui的上传组件？我这个只是需要读取文件内容，不用上传

echo_lovely | 园豆：1507 (小虾三级) | 2022-09-08 14:26

@echo_lovely: 是的，你就在before-upload方法里打印下file，存下它的地址，这就获取到了；然后再return 个false，就不会走后续流程了

你风致 | 园豆：2215 (老鸟四级) | 2022-09-08 14:37

@秃秃小前端: 好的，我试试！

echo_lovely | 园豆：1507 (小虾三级) | 2022-09-08 14:40

其他回答(3)

<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>

收获园豆：2

Biuget-Golang | 园豆：784 (小虾三级) | 2022-09-08 14:13

<el-upload
class="upload-demo"
action=" https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
export default {
data() {
return {
fileList: [{name: 'food.jpeg', url: ' https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: ' https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件);
},
beforeRemove(file, fileList) {
return this.$confirm(确定移除 ${ file.name }？);
}
}
}
</script>

支持(0) 反对(0) Biuget-Golang | 园豆：784 (小虾三级) | 2022-09-08 14:14

@Biuget-Golang: element-ui的代码全拿过来了

支持(0) 反对(0) echo_lovely | 园豆：1507 (小虾三级) | 2022-09-08 14:16

@echo_lovely: 那不知道前端有没有read函数咯。后端是可以读取的。

支持(0) 反对(0) Biuget-Golang | 园豆：784 (小虾三级) | 2022-09-08 14:32

@Biuget-Golang: 需求是，前端读取文本文件（csv格式），然后将文本文件处理，然后用于前端界面显示

支持(0) 反对(0) echo_lovely | 园豆：1507 (小虾三级) | 2022-09-08 14:33

@Biuget-Golang: 不用上传文件给后端

支持(0) 反对(0) echo_lovely | 园豆：1507 (小虾三级) | 2022-09-08 14:33

@echo_lovely: 理解不到我的意思，这种建议先查百度，上面一大把。

支持(0) 反对(0) Biuget-Golang | 园豆：784 (小虾三级) | 2022-09-08 14:39

html5的话，可以使用file system access api。chrome 86以上支持。
官方给的Demo： https://googlechromelabs.github.io/text-editor/，参考里面打开文件的功能。
MDN中，关于这个api的文档： https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API

async function returnPathDirectories(directoryHandle) {

  // Get a file handle by showing a file picker:
  const [handle] = await self.showOpenFilePicker();
  if (!handle) {
    // User cancelled, or otherwise failed to open a file.
    return;
  }

  // Check if handle exists inside directory our directory handle
  const relativePaths = await directoryHandle.resolve(handle);

  if (relativePaths === null) {
    // Not inside directory handle
  } else {
    // relativePaths is an array of names, giving the relative path

    for (const name of relativePaths) {
      // log each entry
      console.log(name);
    }
  }
}

上面的代码是样例。

收获园豆：6

ensleep | 园豆：1682 (小虾三级) | 2022-09-08 19:53

我试试

支持(0) 反对(0) echo_lovely | 园豆：1507 (小虾三级) | 2022-09-09 08:36

他要https才可以用

支持(0) 反对(0) echo_lovely | 园豆：1507 (小虾三级) | 2022-09-09 10:04

我试了，但是能拿到文件名，拿不到文件内容

支持(0) 反对(0) echo_lovely | 园豆：1507 (小虾三级) | 2022-09-09 10:38

html 的 input file不就可以??

收获园豆：4

人间春风意 | 园豆：2780 (老鸟四级) | 2022-09-09 09:44

但是那个东西，和页面不搭啊，而且后面逻辑处理不容易做

支持(0) 反对(0) echo_lovely | 园豆：1507 (小虾三级) | 2022-09-09 09:45

@echo_lovely: 这个跟vue的选择文件是一样的效果，因为vue选择文件，用的实际就是 html 的 input file

支持(0) 反对(0) 人间春风意 | 园豆：2780 (老鸟四级) | 2022-09-09 09:48

@人间春风意: 能给个例子不能？

支持(0) 反对(0) echo_lovely | 园豆：1507 (小虾三级) | 2022-09-09 09:49

@echo_lovely: 除非你把文件都读取出来，自己用一个div重新填数据，这样，很麻烦的

支持(0) 反对(0) 人间春风意 | 园豆：2780 (老鸟四级) | 2022-09-09 09:49

@echo_lovely: https://www.cnblogs.com/uoky/articles/16122424.html 这个可以吗？
都是获取文件的，没有涉及到选择文件的效果，一个原生的，一个vue的

支持(0) 反对(0) 人间春风意 | 园豆：2780 (老鸟四级) | 2022-09-09 09:51

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

Vue如何打开文件选择窗，然后读取选择文件的内容呢？

欢迎，请先登录或者注册。