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

安装vuedraggable插件

npm install vuedraggable

引用vuedraggable

import vuedraggable from 'vuedraggable'

图片上传代码

 
        

          

              
                

                  
                  
                

              
             
              上传照片
             
          

        

      

参数

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;
        },