Spring Boot集成Dropzone.js：如何让上传图片显示在图库顶部？

嗨，我来帮你搞定这个问题！Dropzone本身提供了调整预览元素位置的内置能力，再结合你当前使用的image-picker组件，我们可以从两个方向解决这个需求：

方法一：利用Dropzone内置事件调整预览插入逻辑 #

Dropzone默认会把新文件的预览元素追加到容器末尾，但你可以通过addedfile钩子手动控制插入位置。不过看你的配置里previewsContainer: null，而且预览模板是隐藏的li，你实际是把图片加到了image-picker组件里，所以这个方法更适合用Dropzone自带预览容器的场景，给你参考一下：

extraImageDropzone.on("addedfile", function(file) {
  // 拿到预览容器（如果你的previewsContainer不是null的话）
  const previewContainer = this.previewsContainer;
  // 把新预览元素插入到容器的最前面
  previewContainer.insertBefore(file.previewElement, previewContainer.firstChild);
});

方法二：修改image-picker的元素插入位置（你的场景更适用） #

看你的success回调里，是通过append_one把新图片加到图库的，这个方法默认是追加到末尾。我们可以改成往开头插入：

1. 如果image-picker组件有现成的前置插入方法（比如prepend_one），直接替换掉append_one就行；
2. 如果没有现成方法，我们可以手动构造元素并插入到图库最前面，示例代码如下：

success: function(f, response) {
  if (response.id) {
    console.log('File uploaded' + response.URL);
    const picker = $(".image-picker").data('picker');
    // 按照image-picker的选项结构构造新元素
    const newImageOption = `<option value="${response.id}" data-img-src="${response.URL}">${response.id}</option>`;
    // 插入到select标签的最前面
    picker.$el.find('select').prepend(newImageOption);
    // 刷新picker的视图，确保新元素显示出来
    picker.sync_picker_with_select();
  } else {
    alert('Error while uploading');
    this.removeFile(f);
  }
}

小提示：修正配置里的拼写错误 #

你的预览模板里有个小笔误：diplay:none应该是display:none，虽然不影响当前功能，但修正后更规范~

内容的提问来源于stack exchange，提问作者Dejan Sipovac