首页 新闻 搜索 专区 学院

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

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

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

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

echo_lovely的主页 echo_lovely | 小虾三级 | 园豆:903
提问于:2022-09-08 13:48
< >
分享
最佳答案
0

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

收获园豆:8
你风致 | 老鸟四级 |园豆:2180 | 2022-09-08 14:23

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

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

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

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

@秃秃小前端: 好的,我试试!

echo_lovely | 园豆:903 (小虾三级) | 2022-09-08 14:40
其他回答(3)
0

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

收获园豆:2
Biuget-Golang | 园豆:322 (菜鸟二级) | 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 | 园豆:322 (菜鸟二级) | 2022-09-08 14:14

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

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

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

支持(0) 反对(0) Biuget-Golang | 园豆:322 (菜鸟二级) | 2022-09-08 14:32

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

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

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

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

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

支持(0) 反对(0) Biuget-Golang | 园豆:322 (菜鸟二级) | 2022-09-08 14:39
0

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 | 园豆:903 (小虾三级) | 2022-09-09 08:36


他要https才可以用

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

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

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

html 的 input file不就可以??

收获园豆:4
人间春风意 | 园豆:1607 (小虾三级) | 2022-09-09 09:44

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

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

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

支持(0) 反对(0) 人间春风意 | 园豆:1607 (小虾三级) | 2022-09-09 09:48

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

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

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

支持(0) 反对(0) 人间春风意 | 园豆:1607 (小虾三级) | 2022-09-09 09:49

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

支持(0) 反对(0) 人间春风意 | 园豆:1607 (小虾三级) | 2022-09-09 09:51
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册