前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发:
1、通过input type=”file” 选择本地文件
2、通过拖拽的方式把文件拖过来
3、在编辑框里面复制粘贴
如果是非要不经过用户通过js读取,建议将文件放在项目static目录下,然后通过ajax请求
vue引用static下资源时,必须使用绝对路径
/static/[name]
因为static目录下的文件并不会被webpack处理,它们会直接复制到最终目录(dist/static)下,一般放类库文件
- 将本地文件放在static下
- 通过get请求
因为请求的是本项目static目录下的资源,所以请求的url不需要加域名和端口(如"http:localhost:8081"),不然部署到服务器容易请求不到数据
this.$axios
.get("/static/data/zt_bj_5g_location3.csv")
.then(res => {
let csv= res.data;
console.log(csv);
});
如果是部署到tomcat服务器,最好区分一下开发环境还是生产环境
const baseUrl = process.env.NODE_ENV == "development"?'':'/myprojectname';
module.exports={
baseUrl:baseUrl
}
let url=baseUrl+"/static/data/zt_bj_5g_location3.csv"
this.$axios
.get(url)
.then(res => {
let csv= res.data;
console.log(csv);
});