vue-cli中获取上传文件的原生进度

Posted 2021-11-02 码上暴富

vue-cli中获取上传文件的原生进度

• vue-cli中获取上传文件的原生进度

vue-cli中获取上传文件的原生进度

封装请求

export function fileUploadNew(url, params, timeout, onUploadProgress) {
	return new Promise((resolve, reject) => {
		axios({
			url,
			method: 'post',
			data: params,
			headers: {
				'Content-Type': 'multipart/form-data'
			},
			timeout: timeout, // 设置响应时间
			onUploadProgress: onUploadProgress // 原生上传进度
		}).then(res => {
			resolve(res.data);
		}).catch(error => {
			reject(error);
		})
	})
}

使用

let formData = new FormData();
                    formData.append("file", file.file);
                    let token = sessionStorage.getItem("token");
                    // 发送请求
                    fileUploadNew(
                        this.serviceUrl + "/api/enclosure/upload?token=" + token + "&relationId=" + "",
                        formData,
                        30 * 1000,
                        (progressEvent) => {
                            this.progressShow = true;
                            this.uploadPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
                        }
                    ).then(res => {
                        console.log(res);
                        this.fileOne = [];
                        file.status = 'done';
                        file.message = '上传成功';
                        this.fileList.push(res.data);
                        this.progressShow = false;
                        this.uploadPercent = 0;
                    }).catch(err => {
                        console.log(err);
                        if (err.config.timeout === 30000) {
                            this.$toast('请求超时，请检查网络')
                        } else {
                            console.log(err)
                        }
                        file.status = 'failed';
                        file.message = '上传失败';
                        this.progressShow = false;
                        this.uploadPercent = 0;
                    });

结果