el-upload+axios取消上传
本demo使用el-upload的手动上传,使用axios进行上传在上传之前的before-upload钩子函数添加一个sourcebeforeUpload(file) {this.source = this.$axios.CancelToken.source(); // 这里初始化source对象if ( file ) {if ( file.size> 100 * 1024 * 1024)
·
本demo使用el-upload的手动上传,使用axios进行上传
在上传之前的before-upload钩子函数添加一个source
beforeUpload(file) {
this.source = this.$axios.CancelToken.source(); // 这里初始化source对象
if ( file ) {
if ( file.size> 100 * 1024 * 1024) {
this.$message.error('文件大于100M,请更换文件')
// cancel()是取消上传
this.source.cancel()
}
}
},
上面的代码只是进行source的创建,和添加判断进行取消上传,接下来需要将source添加到axios请求中的cancelToken字段,相当于添加一个标识符
this.$axios.request({
// 该url为element提供的地址,可以上传小文件
url: 'https://jsonplaceholder.typicode.com/posts/',
method: 'post',
data: form,
cancelToken: this.source.token, // 这里声明的cancelToken其实相当于是一个标记,
// 当我们要取消请求的时候,可以通过这个找到该请求
}).then((res)=> {
param.onSuccess(res)
}).catch(()=> {
param.onError()
})
其实axios进行取消上传,其实就是给上传添加一个cancelToken字段,也就是相当于添加一个标识符,通过该标识符的cancel()函数可以进行取消文件
更多推荐
已为社区贡献3条内容
所有评论(0)