重命名文件不会更改 dropzone.js 中的 filname答案

【问题标题】：rename file does not change filname in dropzone.js重命名文件不会更改 dropzone.js 中的 filname
【发布时间】：2020-12-20 09:45:10
【问题描述】：

我想防止从 dropzone 上传重复文件我的 dropzone 只需要两个文件，所以我想检查第二个文件是否与第一个文件具有相同的文件名，如果是，请更改第二个文件名

使用renameFile 函数

我添加了一个 if 语句来检查文件内容是否相等如果条件为真，则不执行 if 语句

使用简单的版本文件在发送到服务器时被重命名，但在 dropzone 内没有被重命名

renameFile: function (file) {
  let filename =  file.name = "sdsdds.xlsx";
  return filename;

renameFile: function (file) {
  let name = file.name

  let div_children = $('.dz-filename').children();
  // get filename of already existing file
  if (div_children.eq(0).text() !== ""){
    if (div_children.eq(0).text() === div_children.eq(1).text() ) {
      console.log(file.name)
      let filename =  file.name = "sdsdds"
      return filename;
    }
  }
},

document.addEventListener("DOMContentLoaded", function() {
  Dropzone.options.dropform = {
    maxFiles: 2,
    addRemoveLinks: true,
    maxFilesize: 2,
    parallelUploads: 1, //
    renameFile: function(file) {
      let name = file.upload.filename

      let div_children = $('.dz-filename').children();
      // get filename of already existing file
      if (div_children.eq(0).text() !== "") {
        if (div_children.eq(0).text() === div_children.eq(1).text()) {
          console.log(name)
          return name = "sdsdds"
        }
      }
      //
    },
  };
});

<html lang="en">
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/min/dropzone.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
</head>
<body>
  <form id="dropform" action="{{ url_for('receave_files') }}" class="dropzone">
  </form>
</body>
</html>

【问题讨论】：

你能创建一个工作示例吗？这样帮助你会容易得多..
加了一个，文件上传不了

标签： javascript jquery dropzone.js

【解决方案1】：

首先，dropzone autoDiscover 表单并启动它。这是在DOMContentLoaded 之前发生的，因此您之后所做的一切都不会执行任何操作（您会注意到没有任何选项会产生影响）。

第二，文档可能对此不够清楚，但file.upload.filename 在文件上传后可以访问。这用于识别实际名称 (file.name) 和重命名后的新名称 (file.upload.filename)。
因此，您不应使用 file.upload.filename，而应使用 file.name。

第三，我建议不要中继html来查找其他文件名。这不是合同，因此它可能会更改并破坏您的应用程序。
相反，我建议手动启动插件。通过这种方式，您可以获取 dropzone 实例并对其上传文件进行查询。

Dropzone.autoDiscover = false;
const myDropzone = new Dropzone("#dropform", {
  //..
  renameFile: function(file) {
    const { files } = myDropzone;
    const { name } = file;

    if (files.some(file => file.name === name)) {
      return name + Date.now();
    }
    return name;
  }
});

演示

document.querySelector('button').addEventListener('click', () => {
  const names = myDropzone.files.map(({
    upload
  }) => upload.filename).join();
  alert(names);
});

Dropzone.autoDiscover = false;
const myDropzone = new Dropzone("#dropform", {
  url: "/",
  maxFiles: 2,
  addRemoveLinks: true,
  maxFilesize: 2,
  parallelUploads: 1,
  init: function() {
    this.on("addedfile", function(file) {
      file.previewElement.querySelector('[data-dz-name]').textContent = file.upload.filename;
    });
  },
  renameFile: function(file) {
    const { files } = myDropzone;
    const { name } = file;

    if (files.some(file => file.name === name)) {
      return name + Date.now();
    }
    return name;
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/min/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.js"></script>

<div id="dropform" class="dropzone">
</div>
<br />
<button>alert files name</button>

https://jsbin.com/huvoyiw/edit?html,js,output

更新

为了同时更新 ui，您可以收听 addedfile 并相应地更新 DOM。正如我所提到的，我对此感到非常满意，因为 dropzone 可能会更改 DOM，并且功能会停止，但它确实可以完成工作。

init: function() {
  this.on("addedfile", function(file) {
    file.previewElement.querySelector('[data-dz-name]').textContent = file.upload.filename;
  });
},

https://jsbin.com/qoxakod/edit?js,output

【讨论】：

感谢您的建议我不确定在哪里重命名文件，因此文件名也会在 span 元素中更改，这应该在 renameFile 内部或外部完成？
我已经更新了答案，如果有不清楚的地方请告诉我。