前端实现拖拽上传

Vue Frontend Drag Drop Upload

<template>
  <div id="drop_zone" class="file">拖拽上传的图片到此处</div>
</template>

<script>
mounted () {
  let self = this
  function handleFileSelect (evt) {
    evt.stopPropagation()
    evt.preventDefault()
    let files = evt.dataTransfer.files
    self.files = files
    self.changeFile(files)
  }
  function handleDragOver (evt) {
    evt.stopPropagation()
    evt.preventDefault()
    evt.dataTransfer.dropEffect = 'copy'
  }
  var dropZone = document.getElementById('drop_zone')
  dropZone.addEventListener('dragover', handleDragOver, false)
  dropZone.addEventListener('drop', handleFileSelect, false)
},
methods: {
  submit () {
    let self = this
    this.axios.put(this.uploadUrl, this.files[0], {
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      transformRequest: [function (data) {
        return data
      }],
      onUploadProgress: progressEvent => {
        let complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
        self.uploadMessage = '上传 ' + complete
      }
    })
    .then((response) => {
      if (response.status === 200) {
        console.log('上传成功!')n
      }
    })
}
</script>