使用vue.draggable拖拽插件，隐藏原有的上传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>// 放大
handlePictureCardPreviewFileDetail(file) {
this.dialogImageDetailUrl = file.url;
this.dialogVisibleDetail = true;
},
// 删除
handleRemoveFileDetail(index) {
this.fileDetailList.splice(index, 1);
},