发送前预览图像

Question

我在某处发现了适用于拖放的代码：

 addImage($event) {

// loading the FileList from the dataTransfer
let dataTransfer: DataTransfer = $event.mouseEvent.dataTransfer;
if (dataTransfer && dataTransfer.files) {

  // needed to support posting binaries and usual form values
  let files: FileList = dataTransfer.files;

  // uploading the files one by one asynchrounusly
  for (let i = 0; i < files.length; i++) {
    let file: File = files[i];

    // just for debugging
    console.log('Name: ' + file.name + '\n Type: ' + file.type + '\n Size: ' + file.size + '\n Date: ' + file.lastModifiedDate);

    // collecting the data to post
    let data = new FormData();
    data.append('file', file);
    data.append('fileName', file.name);
    data.append('fileSize', file.size.toString());
    data.append('fileType', file.type);
    data.append('fileLastMod', file.lastModifiedDate);


    // posting the data
    let url = 'http://***********.com/gallery/' + this.selectedCategory;
    this._http.post(url, data)
      .toPromise()
      .catch(reason => {
        console.log(JSON.stringify(reason));
      }).then(result => {
      this.getImages();
    });
  }
}

}

但在我发送图像之前，我希望它们以模态形式预览。

我正在考虑需要 1 个参数才能工作的函数，例如：

    previewFile(url) {
          let elem = document.createElement("img");
          elem.className = "previewImage";
          elem.src = url
          document.getElementById("previewImages").appendChild(elem);
        }

但是如何获得 URL 呢？

Answer 1

使用此代码：

elem.src = URL.createObjectURL(file);

发送前预览图像

Preview image before sending it out

javascript

angular

angular5