每日日报 20211117

拖拽上传功能的实现及原理

new Vue({
el: '#app',
data () {
return {
fileName: '',
batchFile: '',
MAX_FILE_SIZE: 10 * 1000 * 1000
}
},
methods: {
// 点击上传
chooseUploadFile (e) {
const file = e.target.files.item(0)

if (!file) return
if (file.size > this.MAX_FILE_SIZE) {
return alert('文件大小不能超过10M')
}

this.batchFile = file
this.fileName = file.name

// 清空，防止上传后再上传没有反应
e.target.value = ''
},
// 拖拽上传
fileDragover (e) {
e.preventDefault()
},
fileDrop (e) {
e.preventDefault()
const file = e.dataTransfer.files[0] // 获取到第一个上传的文件对象

if (!file) return
if (file.size > this.MAX_FILE_SIZE) {
return alert('文件大小不能超过10M')
}

this.batchFile = file
this.fileName = file.name
},
// 提交
uploadOk () {
if (this.batchFile === '') {
return alert('请选择要上传的文件')
}

let data = new FormData()
data.append('upfile', this.batchFile)

// ajax
}
}
})