将文件对象设置为dropzone js时如何获取文件名？答案

【问题标题】：How do I get file name when set file object to dropzone js?将文件对象设置为dropzone js时如何获取文件名？
【发布时间】：2021-03-17 10:24:27
【问题描述】：

使用图像名称及其 url 的列表数组，我尝试设置一个 dropzone 来上传这些图像文件，但我无法获取 dropzone 的单个文件名。

我试过了：

Dropzone.autoDiscover = false;
$(document).ready(function() {
  var myDropzone = new Dropzone('#myDropzone', {
    url: 'http://localhost/Upload/',
  })

  upload = Dropzone.forElement("#myDropzone");
  imageList = ["Rabbit-Island-beach-850x478.jpg", "Rabbit-Island-Pier-1-850x478.jpg"]
  url = "https://blog.camboticket.com/wp-content/uploads/2019/06/"

  for (var i = 0; i < imageList.length; i++) {
    image_url = url + imageList[i]
    console.log(imageList[i])
    fetch(image_url)
      .then(res => res.blob())
      .then(blob => {
        // mime = blob['type'].toString().split('/')[0]
        // ext = blob['type'].toString().split('/')[1]
        // let file = new File([blob], blob.size+'.'+ext, blob);
        let file = new File([blob], imageList[i], blob);
        upload.addFile(file);
      });

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- dropzone cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.6/min/dropzone.min.js" integrity="sha512-KgeSi6qqjyihUcmxFn9Cwf8dehAB8FFZyl+2ijFEPyWu4ZM8ZOQ80c2so59rIdkkgsVsuTnlffjfgkiwDThewQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.6/dropzone.min.css" integrity="sha512-jU/7UFiaW5UBGODEopEqnbIAHOI8fO6T99m7Tsmqs2gkdujByJfkCbbfPSN4Wlqlb9TGnsuC0YgUgWkRBK7B9A==" crossorigin="anonymous" />


<div class="dropzone" id="myDropzone"></div>

如此处所示，文件名未定义。如何在这里获得正确的文件名？因为我得到它是为了以正确的文件名提交到服务器？谢谢。

PS：我尝试通过imageList[i]获取文件名，但在fetch()函数中不起作用。

【问题讨论】：

标签： javascript dropzone.js

【解决方案1】：

经过一天的尝试，我设法通过post自己找到了解决方案，使用Promise.all()。

这里是：

Dropzone.autoDiscover = false;
$(document).ready(function() {
  var myDropzone = new Dropzone('#myDropzone', {
    url: 'http://localhost/Upload/',
  })

  upload = Dropzone.forElement("#myDropzone");
  imageList = ["Rabbit-Island-beach-850x478.jpg", "Rabbit-Island-Pier-1-850x478.jpg"]
  url = "https://blog.camboticket.com/wp-content/uploads/2019/06/"

  var tmp = 0;

  let urls = []

  for (var i = 0; i < imageList.length; i++) {
    image_url = url + imageList[i]
    urls.push(image_url);
  }

  Promise.all(
    urls.map(url =>
      fetch(url)
      .then(res => res.blob())
      .then(blob => {

        name = url.split('/')[url.split('/').length - 1]
        // name = name[name.length - 1]
        let file = new File([blob], name, blob);
        upload.addFile(file);
      })
    ))




});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- dropzone cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.6/min/dropzone.min.js" integrity="sha512-KgeSi6qqjyihUcmxFn9Cwf8dehAB8FFZyl+2ijFEPyWu4ZM8ZOQ80c2so59rIdkkgsVsuTnlffjfgkiwDThewQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.6/dropzone.min.css" integrity="sha512-jU/7UFiaW5UBGODEopEqnbIAHOI8fO6T99m7Tsmqs2gkdujByJfkCbbfPSN4Wlqlb9TGnsuC0YgUgWkRBK7B9A==" crossorigin="anonymous" />

<div class="dropzone" id="myDropzone"></div>

它对我来说非常好，我希望它对像我一样有同样问题的人也一样。谢谢。

【讨论】：

【解决方案2】：

运行js控制台Dropzone.getElement("form_id") 然后你想得到哪个元素 Dropzone.getElement("#x").getElementsByClassName("dz-filename")[0].innerText

【讨论】：