dragover - 被拖动的对象进入目标容器时触发
dragleave - 被拖动的对象离开目标容器时触发
drop - 被拖动的对象进入目标容器，释放鼠标键时触发
代码示例:
<template>
<div ref="drag" class="drag">
<div class="drag-icon-box">
<!-- 采用的是 element-ui 的图标 -->
<i class="el-icon-upload"></i>
</div>
<div class="drag-message">
<span class="drag-message-title">将文件拖动到此处，或</span>
<label for="file" class="drag-message-label">
<input
class="drag-message-input"
type="file"
id="file"
name="file"
@change="handleFileChange"
/>
<span class="drag-message-manual">点击上传</span>
</label>
</div>
</div>
</template>
<script>
export default {
data() {
return {
file: null
}
},
async mounted() {
// 给容器绑定相关的拖拽事件
this.bindEvents()
},
methods: {
bindEvents() {
const drag = this.$refs.drag
// 被拖动的对象进入目标容器
drag.addEventListener('dragover', e => {
e.preventDefault()
drag.style.borderColor = 'red'
})
// 被拖动的对象离开目标容器
drag.addEventListener('dragleave', e => {
e.preventDefault()
drag.style.borderColor = '#eee'
})
// 被拖动的对象进入目标容器，释放鼠标键
drag.addEventListener('drop', e => {
e.preventDefault()
drag.style.borderColor = '#eee'
const fileList = e.dataTransfer.files
this.file = fileList[0]
this.uploadFile()
})
},
async uploadFile() {
const form = new FormData()
form.append('name', 'file')
form.append('file', this.file)
const res = await axios.post('/upload', form)
},
handleFileChange(e) {
const file = e.target.files[0]
if (!file) return
this.file = file
this.uploadFile()
}
}
}
</script>
<style lang="scss" scoped>
.drag {
width: 660px;
height: 300px;
border: 2px dashed;
border-color: #a3a3a3;
border-radius: 5px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.drag-icon-box {
width: 100%;
height: 60px;
text-align: center;
font-size: 50px;
line-height: 60px;
color: #606266;
}
.drag-message {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
.drag-message-title {
font-size: 14px;
color: #606266;
}
.drag-message-label {
width: 120px;
height: 50px;
height: auto;
position: relative;
overflow: hidden;
.drag-message-input {
position: absolute;
left: -100px;
top: -100px;
z-index: -1;
display: none;
}
.drag-message-manual {
font-size: 14px;
color: #4b87ff;
cursor: pointer;
}
}
}
}
</style>
上传进度条
进度条可以说是最普遍的一种需求，特别是大文件上传的时候。实现方法也比较简单，利用 axios 的 onUploadProgress 方法就可以了。
<div>
<!-- 采用的是 element-ui 的进度条组件 -->
<el-progress
:stroke-width="20"
:text-inside="true"
:percentage="uploadProgress"
></el-progress>
</div>
<script>
export default {
data() {
return {
file: null,
uploadProgress: 0
}
},
methods: {
async uploadFile() {
const form = new FormData()
form.append('name', 'file')
form.append('file', this.file)
const res = await axios.post('/uploadfile', form, {
onUploadProgress: progress => {
this.uploadProgress = Number(
((progress.loaded / progress.total) * 100).toFixed(2)
)
}
})
},
handleFileChange(e) {
const file = e.target.files[0]
if (!file) return
this.file = file
this.uploadFile()
}
}
}
</script>
取消上传
使用axios取消请求的方法
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.post('/upload', form, {
cancelToken: source.token
})
source.cancel();
==================================================================
const CancelToken = axios.CancelToken;
let cancel;
axios.post('/upload', form, {
cancelToken: new CancelToken(function executor(c) {
cancel = c;
})
});
cancel();