【vue】读取本地文件

前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发:
1、通过input type=”file” 选择本地文件
2、通过拖拽的方式把文件拖过来
3、在编辑框里面复制粘贴

如果是非要不经过用户通过js读取,建议将文件放在项目static目录下,然后通过ajax请求

vue引用static下资源时,必须使用绝对路径/static/[name]
因为static目录下的文件并不会被webpack处理,它们会直接复制到最终目录(dist/static)下,一般放类库文件

  1. 将本地文件放在static下
  2. 通过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);
        });
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值