【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);
        });
### 读取本地文件资源的实现方式 在 Electron-Vue 项目中,可以通过多种方式读取本地文件资源。以下将结合引用内容[^1]和[^2],详细介绍如何实现这一功能。 #### 1. 配置 `extraResources` 加载本地文件 在构建配置文件中,通过设置 `extraResources` 参数,可以将指定的本地文件或目录打包到最终的应用程序中。例如: ```json "build": { "appId": "com.yuma.duifu", "extraResources": { "from": "./config.conf", // 指定要打包的文件路径 "to": "../" // 指定打包后文件的存放位置 } } ``` 上述配置会将 `config.conf` 文件打包到应用程序的安装目录下[^1]。之后,可以通过 Electron 提供的 `app.getPath('userData')` 或其他路径方法获取文件的实际存储位置。 #### 2. 使用 `fs` 模块读取本地文件 Electron 提供了 Node.js 的完整支持,因此可以直接使用 `fs` 模块读取本地文件资源。以下是一个示例代码: ```javascript const fs = require('fs'); const path = require('path'); // 获取用户数据目录 const userDataPath = path.join(process.env.NODE_ENV === 'production' ? process.resourcesPath : __dirname, './config.conf'); // 根据环境动态调整路径 fs.readFile(userDataPath, 'utf8', (err, data) => { if (err) { console.error('读取文件失败:', err); return; } console.log('读取到的文件内容:', data); // 处理读取到的文件内容 }); ``` 此代码片段展示了如何根据运行环境动态调整文件路径,并通过 `fs.readFile` 方法异步读取文件内容[^2]。 #### 3. 创建一次性链接访问文件 如果需要在前端展示本地文件(如图片、文档等),可以使用 `URL.createObjectURL` 方法创建一个临时的文件访问链接。例如: ```javascript const fs = require('fs'); const path = require('path'); const filePath = path.join(process.env.NODE_ENV === 'production' ? process.resourcesPath : __dirname, './example.png'); // 替换为实际文件路径 try { const fileBuffer = fs.readFileSync(filePath); // 同步读取文件 const blob = new Blob([fileBuffer], { type: 'image/png' }); // 将文件转换为 Blob 对象 const fileUrl = URL.createObjectURL(blob); // 创建文件的临时 URL console.log('文件 URL:', fileUrl); // 在前端使用该 URL 显示文件 } catch (err) { console.error('读取文件失败:', err); } ``` 此方法适用于需要在网页中直接展示本地文件的场景。 #### 4. 使用绝对路径访问文件 在开发环境中,可以直接通过文件的绝对路径访问资源。而在生产环境中,可以通过 `process.resourcesPath` 动态获取打包后的文件路径。例如: ```html <img src="file:///${process.env.NODE_ENV === 'production' ? process.resourcesPath : __dirname}/example.png" alt="Example"> ``` 需要注意的是,这种方式可能受到浏览器的安全限制,建议优先使用 `fs` 或 `Blob` 方法处理文件资源。 --- ### 注意事项 - 在生产环境中,确保正确区分开发与生产路径,避免因路径错误导致文件无法加载。 - 如果需要解析配置文件内容,可以使用 JSON 格式或其他标准格式,并通过 `JSON.parse` 方法解析数据。 - 对于敏感文件,建议采取适当的加密或权限管理措施,防止数据泄露。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值