文件上传是最常见的一种业务需求，上传功能可简单，可复杂，简单就是把文件传上去就行，复杂就是涉及大文件断点续传、控制并发等，不知道大家对上传都了解多少。今天要给大家分享的是上传需求中最为常见的一些场景，话不多说，开干：
拖拽上传
拖拽上传涉及到样式交互、文件信息获取，那么，我们首先了解一下拖拽相关的几个事件：
- 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>
取消上传
当上传很慢等的捉急时，或者手一抖，上传了一个不该上传的视频（你懂的），在上传未完成的情况下，能否进行取消呢？答案当然是可以的。
效果展示
其实取消上传就是取消 ajax 请求，可以利用 axios 的 cancel token 进行取消。
方法一：使用 CancelToken.source 工厂方法创建 cancel token
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.post('/upload', form, {
cancelToken: source.token
})
source.cancel();
方法二：通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token
const CancelToken = axios.CancelToken;
let cancel;
axios.post('/upload', form, {
cancelToken: new CancelToken(function executor(c) {
cancel = c;
})
});
cancel();
有兴趣的同学可以试一试，将以上方法融入到自己的项目中。
总结
ok，以上就是上传需求中最常见的一些场景，无论是拖拽上传还是粘贴上传，最主要的是通过相应的事件拿到文件信息。而进度条和取消上传则是利用 axios 的 api 进行实现，axios 还有众多实用的配置选项，大家可以自己研究一哈。
如果文章对你有所帮助，不要忘了点个赞呦~
听说喜欢点赞的人运气都不差，相信今年的你一定逢考必过，逢奖必中！