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>
