本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()函数可以进行取消文件

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐