Vue如何打开文件选择窗，然后读取选择文件的内容呢？
0
悬赏园豆：20
[已解决问题]
解决于 2022-09-09 13:30
就像这样
选择一个文本文件，然后打开，文件里的内容
页面组件用的是element-ui的东西
最佳答案
0
它方法里的api的file参数就是文件相关的信息了
收获园豆：8
你指的是使用element-ui的上传组件？我这个只是需要读取文件内容，不用上传
@echo_lovely: 是的，你就在before-upload方法里打印下file，存下它的地址，这就获取到了；然后再return 个false，就不会走后续流程了
@秃秃小前端: 好的，我试试！
其他回答(3)
0
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
收获园豆：2
<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>
@Biuget-Golang: element-ui的代码全拿过来了
@echo_lovely: 那不知道前端有没有read函数咯。后端是可以读取的。
@Biuget-Golang: 需求是，前端读取文本文件（csv格式），然后将文本文件处理，然后用于前端界面显示
@Biuget-Golang: 不用上传文件给后端
@echo_lovely: 理解不到我的意思，这种建议先查百度，上面一大把。
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
我试试
他要https才可以用
我试了，但是能拿到文件名，拿不到文件内容
0
html 的 input file不就可以??
收获园豆：4
但是那个东西，和页面不搭啊，而且后面逻辑处理不容易做
@echo_lovely: 这个跟vue的选择文件是一样的效果，因为vue选择文件，用的实际就是 html 的 input file
@人间春风意: 能给个例子不能？
@echo_lovely: 除非你把文件都读取出来，自己用一个div重新填数据，这样，很麻烦的
@echo_lovely: https://www.cnblogs.com/uoky/articles/16122424.html 这个可以吗？
都是获取文件的，没有涉及到选择文件的效果，一个原生的，一个vue的
