Dropzone.js如何给previewElements添加带索引序号的id属性

Dropzone 本身没有内置类似data-dz-*格式的索引占位符，以下两种方案均可实现需求：

方案1：通过addedfile事件动态注入（推荐，兼容性最好） #

维护一个全局索引计数器，在文件新增回调中直接给预览元素赋值ID，同时支持删除文件后重新排序：

// 定义全局索引计数器
let uploadItemIndex = 0;

const myDropzone = new Dropzone("#dropzone-container", {
  url: "/your/upload/url",
  // 自定义预览模板不需要提前写ID字段
  previewTemplate: `
    <div class="dz-preview dz-file-preview">
      <img data-dz-thumbnail alt="预览图">
      <p class="dz-name" data-dz-name></p>
      <p class="dz-size" data-dz-size></p>
    </div>
  `,
  init: function() {
    // 监听文件新增事件
    this.on("addedfile", function(file) {
      uploadItemIndex++;
      // 给当前预览元素设置序列ID
      file.previewElement.id = `item-${uploadItemIndex}`;
      // 可将索引挂载到file对象上，方便后续逻辑调用
      file.customUploadIndex = uploadItemIndex;
    });

    // 可选：删除文件后重新排列剩余元素ID，保证序号连续
    this.on("removedfile", function() {
      uploadItemIndex = 0;
      this.files.forEach((file) => {
        uploadItemIndex++;
        file.previewElement.id = `item-${uploadItemIndex}`;
        file.customUploadIndex = uploadItemIndex;
      });
    });
  }
});

方案2：自定义模板占位符替换 #

如果需要实现类似内置占位符的模板写法，可重写预览模板渲染逻辑自定义占位符：

let uploadItemIndex = 0;
const myDropzone = new Dropzone("#dropzone-container", {
  url: "/your/upload/url",
  // 模板中添加自定义占位符
  previewTemplate: `
    <div class="dz-preview dz-file-preview" id="item-{{upload-index}}">
      <img data-dz-thumbnail alt="预览图">
      <p class="dz-name" data-dz-name></p>
      <p class="dz-size" data-dz-size></p>
    </div>
  `,
  init: function() {
    // 重写默认模板获取逻辑，替换自定义占位符
    const originGetPreviewTemplate = this._getPreviewTemplate.bind(this);
    this._getPreviewTemplate = function() {
      uploadItemIndex++;
      return originGetPreviewTemplate().replace('{{upload-index}}', uploadItemIndex);
    };
  }
});

注意：方案2如果需要删除后序号连续，同样需要配合removedfile事件重新遍历赋值。

内容的提问来源于stack exchange，提问作者Bozhidar Georgiev