本地存储：保存和恢复文件对象的方法指南-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

本地存储：保存和恢复文件对象的方法指南

P粉253518620 2023-08-22 13:29:16

[JavaScript讨论组]

1367

我有一个使用HTML5 / JavaScript的应用程序，它使用

<input type="file" accept="image/*;capture=camera" onchange="gotPhoto(this)">

来捕获相机图像。因为我的应用程序希望能离线运行，所以我要如何将File（https://developer.mozilla.org/en-US/docs/Web/API/File）对象保存在本地存储中，以便稍后可以通过ajax上传时检索出来？

我正在从中获取文件对象...

function gotPhoto(element) { 
     var file = element.files[0];
     //我想在这里将'file'保存到本地存储 :-(
}

我可以将对象转换为字符串并保存，但是当我恢复它时，它不再被识别为File对象，因此无法用于获取文件内容。

我有一种感觉这是无法实现的，但我愿意听取建议。

顺便说一下，我的解决方法是在存储时读取文件内容并将完整内容保存到本地存储中。这样做可以工作，但会快速消耗本地存储空间，因为每个文件都是1MB以上的照片。

P粉253518620

全部回复(1)

P粉0051346852023-08-23 12:08:41 1楼

将其转换为base64然后保存。

function gotPhoto(element) {
   var file = element.files[0];
   var reader = new FileReader()
   reader.onload = function(base64) {
      localStorage["file"] = base64;
   }
   reader.readAsDataURL(file);
}
// 保存到本地存储

function getPhoto() {
   var base64 = localStorage["file"];
   var base64Parts = base64.split(",");
   var fileFormat = base64Parts[0].split(";")[1];
   var fileContent = base64Parts[1];
   var file = new File([fileContent], "文件名", {type: fileFormat});
   return file;
}
// 获取文件对象

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>