<div ref='select_frame' ondragstart="return false">//防止跳转 </div>
this.$refs.select_frame.ondragleave = (e) => { e.preventDefault() // 阻止离开时的浏览器默认行为 } this.$refs.select_frame.ondrop = (e) => { e.preventDefault() // 阻止拖放后的浏览器默认行为 const data = e.dataTransfer.files[0] // 获取文件对象 if (data.length < 1) { return // 检测是否有文件拖拽到页面 } console.log(data) this.upload(data)//上传文件的方法 } this.$refs.select_frame.ondragenter = (e) => { e.preventDefault() // 阻止拖入时的浏览器默认行为 this.$refs.select_frame.border = '2px dashed red' } this.$refs.select_frame.ondragover = (e) => { e.preventDefault() // 阻止拖来拖去的浏览器默认行为 }
上面的代码就可以实现vue中拖拽文件上传啦~