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

Question

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

这是我试过的：

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>

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

P.S: 我试图通过 imageList[i] 获取文件名，但在 fetch() 函数中不起作用。

Answer 1

经过一天的尝试，我设法通过使用 Promise.all().

通过这个 post 自己找到了解决方案

这里是：

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>

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

Answer 2

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

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

How do I get file name when set file object to dropzone js?

javascript

dropzone.js