element-ui+vue实现图片上传加拖拽功能

安装vuedraggable插件

npm install vuedraggable

引用vuedraggable

import vuedraggable from 'vuedraggable'

图片上传代码

 <el-form-item label="商品图片" :rules="{required: true}">
        <div class="deviceinfo-box">
          <div class="deviceinfo-box-item">
              <draggable
                v-model="upload1.list"
                class="list-group"
                tag="ul"
              >
                <div v-for="(item,index) in upload1.list" :key="index" v-loading="productForm.loadingapp" class="listitem" @mouseenter="showDelBtn(index)" @mouseleave="hiddenDelBtn">
                  <img v-if="item" :src="item.response.data.original" width="148" height="148" class="imgSty" >
                  <i v-show="index==productForm.currentDelBtn" class="el-icon-delete delIcon" @click="deleImg(item,index)" />
                </div>
              </draggable>
             <el-upload  :show-file-list="false" class="teacher_el_upload" multiple :action="upload1.action" :headers="upload1.headers" :data="upload1.data" :limit="upload1.limit" list-type="picture-card"
                       :on-remove="handleRemove1" :on-success="handleSuccess1" :on-error="handleError1" :on-exceed="exceed1"  :before-upload="imgBefore"
                       :file-list="upload1.list" :class="{ disabled: upload1.disabled }" ref="upload">
              <span class="teacher_el_upload_btn">上传照片</span>
             </el-upload>
          </div>
        </div>
      </el-form-item>

参数

data(){
          return{
            productForm:{
              productPicList: [],
              currentDelBtn: -1,
              loadingapp: false,
              drag: false
            },
              upload1:{
              action:‘地址',
              headers:{
                token: 
              },
              data:{},
              list:[],
              disabled:false
            },
}

方法

handleError1(err, file, fileList) {
          this.$message({
            message: '上传失败！',
            type: 'success'
          });
          console.log(err);
        },
        handleSuccess1(response, file, fileList) {
          if (response.code==200){
            this.upload1.list = fileList;
            if (fileList.length >= 1) {
              this.upload1.disabled = true;
            }
            this.$message({message: '上传成功！',type: 'success'});
          }else{
            this.$message({message: response.message,type: 'error'});
          }
        },
        handleRemove1(file, fileList) {
          this.upload1.list = fileList;
          this.upload1.disabled = false;
        },