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

     

         
已上传{{fileList.length}}/{{max}}张，拖拽可调整排序
         

              
                  

                      

                              
                              

                                

                                  
                                  
                                
                              
                            

                          

                          

                            
                              
                            
                          
                        
                      

                    

                  

    
      

        
      

    


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