使用draggable+element-ui实现图片上传和拖拽排序

<templete>
<div class="allUpload">
     <div class="clearfix">
         <p>已上传{{fileList.length}}/{{max}}张，拖拽可调整排序</p>
         <div class="wrap">
              <draggable
                  v-model="value"
                  animation="400"
                  class="clearfix"
                >
                  <transition-group>

                      <div
                          class="left middleCenter"
                              v-for="(item,index) in value"
                              :key="item.id"
                            >
                              <img
                                :src="item.url"
                                alt=""
                              >
                              <div class="content-wrap">
                                <div class="content middleCenter">
                                  <i
                                    class="el-icon-zoom-in"
                                    @click="showImg(item.url)"
                                  ></i>
                                  <i
                                    class="el-icon-delete"
                                    @click="delImg(item,index)"
                                  ></i>
                                </div>
                              </div>
                            </div>

                          </transition-group>

                          <div
                            slot="footer"
                            style="float:left"
                          >
                            <el-upload
                              action="#"
                              class="wrap"
                              list-type="picture-card"
                              :auto-upload="false"
                              :show-file-list="false"
                              :limit="max"
                              :on-exceed="onExceed"
                              :on-change="onChange"
                              :file-list="fileList"
                              :multiple="true"
                              v-if="isUploadBtn"
                            >
                              <i
                                slot="default"
                                class="el-icon-plus"
                              ></i>
                            </el-upload>
                          </div>
                        </draggable>
                      </div>

                    </div>

                  </div>
<!-- 图片预览 -->
    <el-dialog
      title="查看图片"
      :visible.sync="dialogVisible"
      width="800px"
    >
      <div style="text-align:center">
        <img
          style="max-height:60vh;max-width:100%;"
          :src="dialogImageUrl"
          alt=""
        >
      </div>

    </el-dialog>
</templete>

import draggable from 'vuedraggable'
export default {
  data () {
    return {
            dialogImageUrl: '',//预览图片的url
            dialogVisible: false,//是否显示预览图片弹窗
            fileList: [],//图片文件列表
            value: [],//图片拖拽列表
            max: 10,//可上传图片最大个数
        }
    },
    methods:{
        //上传图片
        uploadImage (file) {
          let formData = new FormData();
          formData.append("files", file.raw);
          this.$http.post('/yjffile/uploadImage?fileType=2', formData).then(res => {
            if (res.data.code === 0) {
              this.urlList(res.data.data[0].fullFilePath)
            } else {
              this.$message.error(res.data.msg || '获取数据失败');
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        },
        //图片预览
        showImg (url) {
          this.dialogImageUrl = url
          this.dialogVisible = true
        },
        //删除单个
        delImg (item, index) {
           this.value.splice(index, 1)
           this.fileList.splice(index, 1)
        },
        onChange (file, fileList) {
          this.fileList = fileList
          this.uploadImage(file)
       },  
        //上传图片超限提醒
        onExceed (files, fileList, props) {
          this.$message({
            message: `超出最大上传数量,最多可上传${this.max}张图片`,
            type: 'error'
          })
        },
        //图片拖拽列表格式化
        urlList (res) {
          const obj = {
            id: Math.random(),
            url: res,
            status: 'success',
            uid: Math.random(),
          }
            if (this.value.length < this.max) {
              this.value = [...this.value, obj]
            }
        }
   },
    mounted () {
        this.value = []
        const unwatch = this.$watch('value', function (newValue, oldValue) {
          this.fileList = newValue
          unwatch()
        });
    },
    computed: {
        //是否显示图片上传按钮
        isUploadBtn () {
          return this.value.length < this.max
        },
    }
}