VueJS csv文件读取器
VueJS csv Filereader
在用Html 5输入字段选择.csv文件后,我正在尝试获取该文件的输入。因此,我使用了一个onFileChange方法和一个FileReader()。下面是我使用的一个示例:http://codepen.io/Atinux/pen/qOvawK/(除了我想读取文本输入,而不是图像文件)。
我的问题是,我在第一次尝试时得到了一个空输入,但在第二次尝试时它有效。为什么?有什么想法吗?(我是javascript初学者;))
html:
<form enctype="multipart/form-data">
<input type="file" @change="onFileChange">
</form>
js:
new Vue({
el: '#app',
data: {
fileinput: ''
},
methods: {
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createInput(files[0]);
},
createInput(file) {
var reader = new FileReader();
var vm = this;
reader.onload = (e) => {
vm.fileinput = reader.result;
}
reader.readAsText(file);
console.log(this.fileinput);
}
}
})
console.log
不显示任何内容的原因是因为FileReader.readAsText()
是异步的。它在执行了console.log
之后完成。
通常可以通过在fileInput
上放置一个监视或使用onload
处理程序中的vm.$emit
引发本地事件来处理此问题。
这里可以使用Promise
函数处理异步代码
new Vue({
el: "#app",
data: {
fileinput: ""
},
methods: {
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.createInput(files[0]);
},
createInput(file) {
let promise = new Promise((resolve, reject) => {
var reader = new FileReader();
var vm = this;
reader.onload = e => {
resolve((vm.fileinput = reader.result));
};
reader.readAsText(file);
});
promise.then(
result => {
/* handle a successful result */
console.log(this.fileinput);
},
error => {
/* handle an error */
console.log(error);
}
);
}
}
});
这是的另一种方式
onFileChange: function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = e => console.log(e.target.result);
reader.readAsText(file);
},
参考使用FileReader API 创建Vue.js文件阅读器组件
如果您希望在promise和数据中定义单独的函数,也可以尝试如下。
new Vue({
el: "#app",
data: {
fileinput: ""
},
methods: {
readFile: function(evt) {
const scope = this
var promiseVar = new Promise(async (resolve, reject) => {
try {
var reader = new FileReader();
var file = evt.target.files[0];
reader.readAsText(file);
reader.onload = function(e) {
scope.fileinput = e.target.result
resolve('complete');
};
} catch (error) {
console.error(error);
reject("There must be an error");
}
});
// let updateds = await Promise.all(promiseVar);
promiseVar.then(data=>{
scope.afterRead();
})
},
afterRead:function(){
console.log(this.fileinput)
// write your logic for import here
}
}
});
相关文章:
- 使用JS/NodeJS测试并读取文件中的变量
- 当读取文件时,浏览器打开良好,但它是空白浏览器
- 当尝试使用ajax读取文件时,变量返回undefined
- 用一些像jsBin/jsFiddle/codePen这样的工具读取文件
- 在Windows Metro风格的Javascript应用程序中读取文件内容
- 咕噜声.js无法读取文件(错误代码:EISDIR)
- 如何从文件夹中读取文件
- Javascript - 如何读取文件
- 如何从 Duktape 中运行的 JavaScript 代码中读取文件
- 当客户端是服务器时,使用 client-JS 读取文件结构
- 如何从chrome扩展名读取文件
- 为什么“;readFile”;使用比读取文件更多的内存's的内容长度
- 在html中读取文件
- 使用javascript读取文件
- 节点尝试在同步写入完成之前读取文件
- 无法通过FileReader读取文件
- 从php中的本地磁盘读取文件
- 使用Javascript读取文件
- 是否可以使用 javascript 从目录中读取文件
- 通过网络浏览器从 URL javascript 读取文件