Vue 和 Axios 的进度条
Progress bar with Vue and Axios
我正在制作一个图片上传器,我想显示一个进度条,该进度条在选择文件后开始递增。
我正在使用 Axios 访问后端,并且设置如下:
const BASE_URL = 'http://localhost:3000';
function uploadImage(data, listingId) {
const url = `${BASE_URL}/listings/${listingId}/images`;
let config = {
onUploadProgress(progressEvent) {
var percentCompleted = Math.round((progressEvent.loaded * 100) /
progressEvent.total);
return percentCompleted;
},
};
return axios.post(url, data, config).
then(x => x.request.response).
catch(error => error);
}
如何从下面的 Vue 端访问 percentCompleted
?
inputDidChange(e) {
let inputData = e.target.files[0];
var formData = new FormData();
formData.append('image', inputData);
uploadImage(formData, this.listingId).
then((x) => {
var xParsed = JSON.parse(x);
this.newFile = xParsed.image.image.url;
this.files.push(this.newFile);
console.log('success');
});
},
将回调传递给您的 uploadImage
函数。
function uploadImage(data, listingId, onProgress){
const url = `${BASE_URL}/listings/${listingId}/images`;
let config = {
onUploadProgress(progressEvent) {
var percentCompleted = Math.round((progressEvent.loaded * 100) /
progressEvent.total);
// execute the callback
if (onProgress) onProgress(percentCompleted)
return percentCompleted;
},
};
return axios.post(url, data, config).
then(x => x.request.response).
catch(error => error);
}
然后传入一个Vue方法
methods:{
onProgress(percent){
//update vue
},
inputDidChange(e) {
let inputData = e.target.files[0];
var formData = new FormData();
formData.append('image', inputData);
uploadImage(formData, this.listingId, this.onProgress).
then((x) => {
var xParsed = JSON.parse(x);
this.newFile = xParsed.image.image.url;
this.files.push(this.newFile);
console.log('success');
});
},
}
我正在制作一个图片上传器,我想显示一个进度条,该进度条在选择文件后开始递增。
我正在使用 Axios 访问后端,并且设置如下:
const BASE_URL = 'http://localhost:3000';
function uploadImage(data, listingId) {
const url = `${BASE_URL}/listings/${listingId}/images`;
let config = {
onUploadProgress(progressEvent) {
var percentCompleted = Math.round((progressEvent.loaded * 100) /
progressEvent.total);
return percentCompleted;
},
};
return axios.post(url, data, config).
then(x => x.request.response).
catch(error => error);
}
如何从下面的 Vue 端访问 percentCompleted
?
inputDidChange(e) {
let inputData = e.target.files[0];
var formData = new FormData();
formData.append('image', inputData);
uploadImage(formData, this.listingId).
then((x) => {
var xParsed = JSON.parse(x);
this.newFile = xParsed.image.image.url;
this.files.push(this.newFile);
console.log('success');
});
},
将回调传递给您的 uploadImage
函数。
function uploadImage(data, listingId, onProgress){
const url = `${BASE_URL}/listings/${listingId}/images`;
let config = {
onUploadProgress(progressEvent) {
var percentCompleted = Math.round((progressEvent.loaded * 100) /
progressEvent.total);
// execute the callback
if (onProgress) onProgress(percentCompleted)
return percentCompleted;
},
};
return axios.post(url, data, config).
then(x => x.request.response).
catch(error => error);
}
然后传入一个Vue方法
methods:{
onProgress(percent){
//update vue
},
inputDidChange(e) {
let inputData = e.target.files[0];
var formData = new FormData();
formData.append('image', inputData);
uploadImage(formData, this.listingId, this.onProgress).
then((x) => {
var xParsed = JSON.parse(x);
this.newFile = xParsed.image.image.url;
this.files.push(this.newFile);
console.log('success');
});
},
}