(精华)2020年7月17日 vue dropZone拖动文件上传

<template>
  <div :id="id" :ref="id" :action="url" class="dropzone">
    <input type="file" name="file">
  </div>
</template>

<script>
import Dropzone from 'dropzone'
import 'dropzone/dist/dropzone.css'
// import { getToken } from 'api/qiniu';

Dropzone.autoDiscover = false

export default {
     
  props: {
     
    id: {
     
      type: String,
      required: true
    },
    url: {
     
      type: String,
      required: true
    },
    clickable: {
     
      type: Boolean,
      default: true
    },
    defaultMsg: {
     
      type: String,
      default: '上传图片'
    },
    acceptedFiles: {
     
      type: String,
      default: ''
    },
    thumbnailHeight: {
     
      type: Number,
      default: 200
    },
    thumbnailWidth: {
     
      type: Number,
      default: 200
    },
    showRemoveLink: {
     
      type: Boolean,
      default: true
    },
    maxFilesize: {
     
      type: Number,
      default: 2
    },
    maxFiles: {
     
      type: Number,
      default: 3
    },
    autoProcessQueue: {
     
      type: Boolean,
      default: true
    },
    useCustomDropzoneOptions: {
     
      type: Boolean,
      default: false
    },
    defaultImg: {
     
      default: '',
      type: [String, Array]
    },
    couldPaste: {
     
      type: Boolean,
      default: false
    }
  },
  data() {
     
    return {
     
      dropzone: '',
      initOnce: true
    }
  },
  watch: {
     
    defaultImg(val) {
     
      if (val.length === 0) {
     
        this.initOnce = false
        return
      }
      if (!this.initOnce) return
      this.initImages(val)
      this.initOnce = false
    }
  },
  mounted() {
     
    const element = document.getElementById(this.id)
    const vm = this
    this.dropzone = new Dropzone(element, {
     
      clickable: this.clickable,
      thumbnailWidth: this.thumbnailWidth,
      thumbnailHeight: this.thumbnailHeight,
      maxFiles: this.maxFiles,
      maxFilesize: this.maxFilesize,
      dictRemoveFile: 'Remove',
      addRemoveLinks: this.showRemoveLink,
      acceptedFiles: this.acceptedFiles,
      autoProcessQueue: this.autoProcessQueue,
      dictDefaultMessage: '' + this.defaultMsg + '
Drop files here to upload',
      dictMaxFilesExceeded: '只能一个图',
      previewTemplate: '
  
+ this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" >+ this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" data-dz-thumbnail />
  
 
  
  
 done 
  
error
',
      init() {
     
        const val = vm.defaultImg
        if (!val) return
        if (Array.isArray(val)) {
     
          if (val.length === 0) return
          val.map((v, i) => {
     
            const mockFile = {
      name: 'name' + i, size: 12345, url: v }
            this.options.addedfile.call(this, mockFile)
            this.options.thumbnail.call(this, mockFile, v)
            mockFile.previewElement.classList.add('dz-success')
            mockFile.previewElement.classList.add('dz-complete')
            vm.initOnce = false
            return true
          })
        } else {
     
          const mockFile = {
      name: 'name', size: 12345, url: val }
          this.options.addedfile.call(this, mockFile)
          this.options.thumbnail.call(this, mockFile, val)
          mockFile.previewElement.classList.add('dz-success')
          mockFile.previewElement.classList.add('dz-complete')
          vm.initOnce = false
        }
      },
      accept: (file, done) => {
     
        /* 七牛*/
        // const token = this.$store.getters.token;
        // getToken(token).then(response => {
     
        //   file.token = response.data.qiniu_token;
        //   file.key = response.data.qiniu_key;
        //   file.url = response.data.qiniu_url;
        //   done();
        // })
        done()
      },
      sending: (file, xhr, formData) => {
     
        // formData.append('token', file.token);
        // formData.append('key', file.key);
        vm.initOnce = false
      }
    })

    if (this.couldPaste) {
     
      document.addEventListener('paste', this.pasteImg)
    }

    this.dropzone.on('success', file => {
     
      vm.$emit('dropzone-success', file, vm.dropzone.element)
    })
    this.dropzone.on('addedfile', file => {
     
      vm.$emit('dropzone-fileAdded', file)
    })
    this.dropzone.on('removedfile', file => {
     
      vm.$emit('dropzone-removedFile', file)
    })
    this.dropzone.on('error', (file, error, xhr) => {
     
      vm.$emit('dropzone-error', file, error, xhr)
    })
    this.dropzone.on('successmultiple', (file, error, xhr) => {
     
      vm.$emit('dropzone-successmultiple', file, error, xhr)
    })
  },
  destroyed() {
     
    document.removeEventListener('paste', this.pasteImg)
    this.dropzone.destroy()
  },
  methods: {
     
    removeAllFiles() {
     
      this.dropzone.removeAllFiles(true)
    },
    processQueue() {
     
      this.dropzone.processQueue()
    },
    pasteImg(event) {
     
      const items = (event.clipboardData || event.originalEvent.clipboardData).items
      if (items[0].kind === 'file') {
     
        this.dropzone.addFile(items[0].getAsFile())
      }
    },
    initImages(val) {
     
      if (!val) return
      if (Array.isArray(val)) {
     
        val.map((v, i) => {
     
          const mockFile = {
      name: 'name' + i, size: 12345, url: v }
          this.dropzone.options.addedfile.call(this.dropzone, mockFile)
          this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v)
          mockFile.previewElement.classList.add('dz-success')
          mockFile.previewElement.classList.add('dz-complete')
          return true
        })
      } else {
     
        const mockFile = {
      name: 'name', size: 12345, url: val }
        this.dropzone.options.addedfile.call(this.dropzone, mockFile)
        this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val)
        mockFile.previewElement.classList.add('dz-success')
        mockFile.previewElement.classList.add('dz-complete')
      }
    }

  }
}
</script>

<style scoped>
    .dropzone {
     
        border: 2px solid #E5E5E5;
        font-family: 'Roboto', sans-serif;
        color: #777;
        transition: background-color .2s linear;
        padding: 5px;
    }

    .dropzone:hover {
     
        background-color: #F6F6F6;
    }

    i {
     
        color: #CCC;
    }

    .dropzone .dz-image img {
     
        width: 100%;
        height: 100%;
    }

    .dropzone input[name='file'] {
     
        display: none;
    }

    .dropzone .dz-preview .dz-image {
     
        border-radius: 0px;
    }

    .dropzone .dz-preview:hover .dz-image img {
     
        transform: none;
        filter: none;
        width: 100%;
        height: 100%;
    }

    .dropzone .dz-preview .dz-details {
     
        bottom: 0px;
        top: 0px;
        color: white;
        background-color: rgba(33, 150, 243, 0.8);
        transition: opacity .2s linear;
        text-align: left;
    }

    .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
     
        background-color: transparent;
    }

    .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
     
        border: none;
    }

    .dropzone .dz-preview .dz-details .dz-filename:hover span {
     
        background-color: transparent;
        border: none;
    }

    .dropzone .dz-preview .dz-remove {
     
        position: absolute;
        z-index: 30;
        color: white;
        margin-left: 15px;
        padding: 10px;
        top: inherit;
        bottom: 15px;
        border: 2px white solid;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 1.1px;
        opacity: 0;
    }

    .dropzone .dz-preview:hover .dz-remove {
     
        opacity: 1;
    }

    .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
     
        margin-left: -40px;
        margin-top: -50px;
    }

    .dropzone .dz-preview .dz-success-mark i, .dropzone .dz-preview .dz-error-mark i {
     
        color: white;
        font-size: 5rem;
    }
</style>

<template>
  <div class="components-container">
    <div class="editor-container">
      <dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS" />
    </div>
  </div>
</template>

<script>
import Dropzone from '@/components/Dropzone'

export default {
     
  name: 'DropzoneDemo',
  components: {
      Dropzone },
  methods: {
     
    dropzoneS(file) {
     
      console.log(file)
      this.$message({
      message: 'Upload success', type: 'success' })
    },
    dropzoneR(file) {
     
      console.log(file)
      this.$message({
      message: 'Delete success', type: 'success' })
    }
  }
}
</script>