element-ui 图片上传upload支持拖拽排序(并保留原有的预览、删除)

实现思路：使用vue.draggable拖拽插件，隐藏原有的上传view，自定义上传view并绑定预览和删除功能

view：

<el-form-item label="商品细节图：">
  <div style="display: flex;height: 110px;">
    <!-- 使用element-ui自带样式 -->
      <ul class="el-upload-list el-upload-list--picture-card">
          <draggable v-model="fileDetailList">
              <li v-for="(item, index) in fileDetailList" :key="item.uid" class="el-upload-list__item is-success animated">
                  <img :src="item.url" alt="" class="el-upload-list__item-thumbnail ">
                  <i class="el-icon-close"></i>
                  <span class="el-upload-list__item-actions">
                    <!-- 预览 -->
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreviewFileDetail(item)">
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <!-- 删除 -->
                    <span class="el-upload-list__item-delete" @click="handleRemoveFileDetail(index)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
              </li>
          </draggable>
      </ul>
      <el-upload
              class="uoloadSty"
              ref="uploadDetail"
              multiple="true"
              :limit="fileDetailMaxLength"
              :on-exceed="fileDetailExceed"
              action=""
              list-type="picture-card"
              :file-list="fileDetailList"
              :show-file-list="false" //隐藏原有的view
              :auto-upload="false"
              :before-upload="beforeUpload"
              :on-change="handleChangeFileDetail"
              :on-remove="handleRemoveFileDetail"
              :on-preview="handlePictureCardPreviewFileDetail">
          <i class="el-icon-plus"></i>
      </el-upload>
  </div>
  <div class="el-upload__tip">只能上传jpg/png文件，且不超过10MB,推荐尺寸(800 x 800),最多上传5张。可拖拽改变图片顺序,点击可放大观看</div>
  <!-- 预览弹出层 -->
  <el-dialog :visible.sync="dialogVisibleDetail">
      <img width="100%" :src="dialogImageDetailUrl" alt="">
  </el-dialog>
</el-form-item>

JS：

// 放大
handlePictureCardPreviewFileDetail(file) {
    this.dialogImageDetailUrl = file.url;
    this.dialogVisibleDetail = true;
},
// 删除
handleRemoveFileDetail(index) {
  this.fileDetailList.splice(index, 1);
},

标签：index,upload,element,ui,file,800,上传,拖拽,view
来源： https://www.cnblogs.com/gteman/p/16382902.html