如何实现从本地的文件夹导入文件并上传？
clipboard.png
- html部分，只实现浏览文件按钮
<input
type="file"
ref="clearFile"
style="display:none"
@change="upload($event)"
class="add-file-right-input"
accept=".csv"
/>
<a-button @click="goFile" size="small" type="primary">
<a-icon type="upload" />浏览文件
</a-button>
- js部分
methods:{
/* ===== 按钮点击上传文件触发input文件 === */
goFile() {
this.$refs.clearFile.click();//上传文件
},
/* =====input file上传文件事件=== */
upload(event) {
let file = event.target.files;//target事件
let size = file[0].size;//获取文件大小
size = size / (1024 * 1024);
for (let i = 0; i < file.length; i++) {
// 上传类型判断
let imgName = file[i].name;
let idx = imgName.lastIndexOf(".");
if (idx != -1) {
let ext = imgName.substr(idx + 1).toUpperCase();
ext = ext.toLowerCase();
if (ext != "csv") {
return;
} else {
this.addArr.push(file[i]);
this.uploadName = file[0].name;
}
}
}
// 上传文件大小
if (size > 5) {
this.uploadName = "";
this.$message.error("文件大小5MB!");
}
this.$refs.clearFile.value = ""; //上传文件后重置
},
handleSubmit() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
if (0 == this.addArr.length) {
this.$message.error("请选择要上传的文件");
return;
}
// 通过FormData将文件转换为二进制数据
let formData = new window.FormData();
//将文件转换为二进制
formData.append("type", this.form.type);
formData.append("key_ver", this.form.key_ver);
for (var i = 0; i < this.addArr.length; i++) {
formData.append("file", this.addArr[i]);
}
let config = {
headers: {
type: "file"
}//这个地方是表单上传文件的请求头
};
this.confirmLoading = true;
this.$httpPost(
"········",//请求接口
formData,
config
)
.then(({ code, desc }) => {
this.confirmLoading = false;
if (code === "0") {
this.addArr = [];
this.$message.success("操作成功!");
this.$parent.getData();
this.handleCancel(1);
} else {
this.$message.error(desc);
}
})
.catch(() => {
this.$message.success("操作失败!");
this.confirmLoading = false;
});
}
});
},
}
},
注：
1.target事件属性可返回事件的目标节点（出发该实践的节点），如生成事件的元素、文档或者窗口。
2.file属性
- name： 文件名，该属性只读
- size：文件大小，单位为字节，该属性只读
- type： 文件类型，该属性只读
- lastModified：文件的上次修改时间，格式为时间戳
- lastModifiedDate：文件上次我修改的时间，格式为Date对象实例
3.FormData创建对象（将本地数据上传或者导入数据库的时候需要使用到FormData对象），可以将所有的表单元素的name和value组成一个queryString提交到后台.
