dropzone vue 文件列表缩略图

您好！感谢您的提问。

如果您想要在 Vue 中使用 Dropzone.js 来实现文件上传，并且显示文件列表缩略图，您可以使用 Dropzone.js 提供的 `thumbnail` 选项来为每个上传的文件生成缩略图。具体实现可以参考下面的代码示例：

<template>
  <div>
    <div class="dropzone" ref="dropzone"></div>
    <div>
      <div v-for="file in fileList" :key="file.id">
        <div>{{ file.name }}</div>
        <img :src="file.thumbnail" />
      </div>
    </div>
  </div>
</template>

<script>
import Dropzone from 'dropzone';

export default {
  data() {
    return {
      fileList: []
    };
  },
  mounted() {
    this.initDropzone();
  },
  methods: {
    initDropzone() {
      const dropzone = new Dropzone(this.$refs.dropzone, {
        url: '/upload',
        thumbnailWidth: 120,
        thumbnailHeight: 120,
        addRemoveLinks: true,
        dictRemoveFile: '删除',
        dictDefaultMessage: '拖拽文件或点击上传',
        accept: function(file, done) {
          done();
        },
        init: function() {
          this.on('success', function(file, response) {
            file.id = response.id;
            file.thumbnail = response.thumbnail;
            this.$parent.fileList.push(file);
          });
          this.on('removedfile', function(file) {
            const index = this.$parent.fileList.indexOf(file);
            if (index >= 0) {
              this.$parent.fileList.splice(index, 1);
            }
          });
        }
      });
    }
  }
};
</script>

在上面的代码中，我们首先定义了一个空的 `fileList` 数组，用来存储上传的文件列表。然后在 `mounted` 钩子函数中调用 `initDropzone` 方法来初始化 Dropzone 实例。在初始化 Dropzone 实例时，我们可以通过设置 `thumbnailWidth` 和 `thumbnailHeight` 属性来指定缩略图的宽度和高度，通过设置 `thumbnail` 回调函数来生成缩略图。具体来说，我们可以在 `init` 回调函数中监听 `success` 事件，在上传成功后获取服务器返回的文件信息，然后将文件信息添加到 `fileList` 数组中。同时，我们可以在 `removedfile` 回调函数中监听 `removedfile` 事件，在用户删除文件时同时从 `fileList` 数组中删除相应的文件信息。

在模板中，我们首先使用一个 `div` 元素作为 Dropzone 的容器，并使用 `ref` 属性来引用该元素。然后使用 `v-for` 指令来遍历文件列表，并使用 `div` 元素来显示每个文件的名称和缩略图。

希望这个回答能够帮助到您！如果您有任何其他问题，请随时提出。