共计 3513 个字符，预计需要花费 9 分钟才能阅读完成。
文件上传是最常见的一种业务需要，上传性能可简略，可简单，简略就是把文件传上去就行，简单就是波及大文件断点续传、管制并发等，不晓得大家对上传都理解多少。明天要给大家分享的是上传需要中最为常见的一些场景，话不多说，开干：
拖拽上传
拖拽上传波及到款式交互、文件信息获取，那么，咱们首先理解一下拖拽相干的几个事件：
- 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 还有泛滥实用的配置选项，大家能够本人钻研一哈。
如果以上内容对你有所帮忙，不要忘了点个赞~
据说喜爱点赞的人运气都不差，置信往年的你肯定逢考必过，逢奖必中😘