在会话存储中保留dropzone文件

时间:2019-04-02 09:47:06

标签: javascript angular typescript dropzone.js

我正在尝试将某些表单数据临时保留在会话存储中,但是找不到正确存储排队(未上传)的dropzone.js文件的方法。

Accoring to documentation,我已经尝试了以下方法:

存储:

dropzone.getQueuedFiles().forEach(function(file, index) {
      sessionStorage.setItem("picture_" + index, file.dataURL);
      sessionStorage.setItem("picture_" + index + "_name", file.name);
      sessionStorage.setItem("picture_" + index + "_type", file.type);
    })

在呈现DOM之后检索:

let restoredFiles = 0;
  for(let i =0; i < dropzone.options.maxFiles; i++) {
    restoredFiles++;
    if(sessionStorage.getItem('picture_' + i) !== null){
      let data_url = sessionStorage.getItem('picture_' + i);
      let name = sessionStorage.getItem('picture_' + i + '_name');
      let type = sessionStorage.getItem('picture_' + i + '_type');
      let mockFile = {dataURL: data_url, name: name, type: type};

      dropzone.emit("addedfile", mockFile);
      dropzone.emit("thumbnail", mockFile);
      dropzone.createThumbnailFromUrl(mockFile);
      dropzone.emit("complete", mockFile);
    }
  }
dropzone.options.maxFiles = dropzone.options.maxFiles - restoredFiles;

将文件添加到Dropzone的效果很好,但是无法显示缩略图。两个缩略图命令之一都不会自动生成缩略图,并且没有实际的URL,我不能真正使用dropzone.createThumbnailFromUrl

有更好的方法吗?

1 个答案:

答案 0 :(得分:0)

花了好一阵子,但最后,我像这样解决了它:

存储:

$results = DB::table('gym_client_purchases gcp')
    ->selectRaw('gcp.client_id, MAX(gcp.purchase_date) AS max_purchase_date')
    ->leftJoin('gym_clients gc', 'gc.id', '=', 'gcp.client_id')
    ->groupBy('gcp.client_id')
    ->orderBy('max_purchase_date', 'desc');

检索:

var images = [];
dropzone.getQueuedFiles().forEach(function (file) {
  let image = {
    dataURL: file.dataURL,
    name: file.name,
    type: file.type,
    size: file.size,
  };
  images.push(image);
});
sessionStorage.setItem("images", JSON.stringify(pictures));