Question

我正在制作一个简单的应用程序，允许用户上传图像和视频，同时自动生成＆lt; div>对于上传并包装的每个内容。每张上传的图片都与前一张特别风格化的图片保持一致。

我想要的是每次上传后（图片或视频），即使我关闭我的应用程序，它也会保留在那里。如果我将来删除它，自然会消失。

是否可以在没有任何本地数据库的情况下执行此操作，如果不是，使用数据库和使用哪个模块的最佳方法是什么？

＆＃13;

//image upload

function uploadImage(file) {

  var reader = new FileReader();
  var div_img = $('<div class="content"></div>');
  reader.onload = function(event) {

    img_url = event.target.result;


    div_img.html(('<img src="' + img_url + '" onmousedown="return false" />'));
    div_img.appendTo('#wrapper');

  }

  reader.readAsDataURL(file);

}

$("#the-image-file-field").change(function() {

  uploadImage(this.files[0])
});


//video upload

function renderVideo(file) {
  var reader = new FileReader();
  var div_vid = $('<div class="content_video"></div>');
  reader.onload = function(event) {


    vid_url = event.target.result;


    div_vid.html(('<video controls><source src="' + vid_url + '" type="video/mp4" /> '));

    div_vid.appendTo('#vid_container');
  }


  reader.readAsDataURL(file);
}

$("#the-video-file-field").change(function() {

  renderVideo(this.files[0])
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type='file' id="the-image-file-field" accept="image/*" />
<input type="file" id="the-video-file-field" accept="video/*" />

<div id="wrapper" class="wrapper">
  <div id="vid_container"></div>

</div>


<script src="javascripts/uploader.js"></script>

＆＃13;

Answer 1

有趣的问题。在不了解您的应用的所有细节的情况下，您的问题没有正确的答案，但这里有一些信息。

问题：是否可以在没有本地数据库的情况下执行此操作？

答案：是的，有可能但要了解后果。

首先，考虑一下你的目标。您希望用户有权访问应用程序中的图像/文件。有两种主要方法可以做到。

用户将图像/文件上传到您的服务器（或图像/文件的二进制表示）
用户将本地计算机上的图像/文件的路径上载到服务器。每当您的应用程序请求此图像时，它将知道在本地计算机上找到它的位置（假设路径没有更改）

你可以想象，这两种情况都有很多后果，但对于这个问题来说，这有点偏离主题。

问题：即使关闭应用，如何保持上传？

答案：这将取决于您处理第一部分的方式，但总体而言，这是一项更容易的任务。这可以使用像jQuery，Angular或许多其他前端框架轻松完成。您要做的是查询数据库以查找用户当前的图像/文件集合，然后为每个图像/文件以特定方式在页面上呈现它。根据您选择的框架，实际代码会有很大差异，但总体而言，如何做到这一点的想法是一样的。

其他注意事项：如果您选择在服务器上存储所有图像/文件数据，这可能会在将来变成一个扩展问题。这样做的好处是什么，而不是使用为nwjs（storage options）构建的众多本地存储选项之一？

另外，不确定您正在运行什么操作系统，但绝对要查看您的nwjs项目文件夹。如果你有一台mac，它很可能位于以下路径：

Users / YourName / Library / Application Support / Your_Project_Name（匹配package.json名称）

很多人都没有意识到nwjs已经包含的内置功能，这一直是开始搜索的好地方。

Answer 2

执行此操作的一种简单方法是在localstorage中存储用户更改的元数据（哪些图像，什么顺序等）。在启动时，您只需遍历元数据并重新创建html，就像之前一样。

由于您使用的是nw.js，因此您不必担心localstorage的限制，因为您可以在清单中设置大小：

https://github.com/nwjs/nw.js/wiki/manifest-format

（寻找dom_storage_quota）

在内部，nw.js使用sqldatabse进行localstorage，所以这实际上只是获得廉价数据存储的一种无痛方式。

是否可以在NW.js中保存html元素更改？

2 个答案: