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

Question

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

我添加了一个 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>

Answer 1

首先，拖放 autoDiscover 表单并启动它。这是在 DOMContentLoaded 之前发生的，所以你在之后所做的一切都没有任何作用（你可以注意到 none 的选项正在影响）。

第二个，文档可能不够清楚，但是 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

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

rename file does not change filname in dropzone.js

javascript

jquery

dropzone.js