如果我使用这个小提琴https://jsfiddle.net/v70kou59/1/,一切都按预期工作
(function () {
var output = document.getElementById('output');
document.getElementById('upload').onclick = function () {
var data = new FormData();
data.append('foo', 'bar');
data.append('file', document.getElementById('file').files[0]);
var config = {
onUploadProgress: function(progressEvent) {
var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
console.log(percentCompleted)
}
};
axios.put('/upload/server', data, config)
.then(function (res) {
output.className = 'container';
output.innerHTML = res.data;
})
.catch(function (err) {
output.className = 'container text-danger';
output.innerHTML = err.message;
});
};
})();
但是,如果我下载axios示例repo并安装必要的依赖项回调函数,onUploadProgress将不再按预期工作。它只用“100”触发onUploadProgress一次。 https://github.com/axios/axios/tree/master/examples
这可能是我的节点版本吗?好像它一定是我的机器。
答案 0 :(得分:2)
我遇到了确切的问题。原因之一(我就是这种情况)可能是因为您的网络太快而无法多次触发progressEvent
。
要对此进行模拟,请在浏览器的“网络”标签上放慢网络速度。
Slow 3G
设置在Google Chrome / New Edge(开发版)浏览器上对我有用。
参考图片
PS:我知道现在回答这个问题为时已晚。但是其他人登陆这里可能会有所帮助。
答案 1 :(得分:0)
因为新版本发生了变化。
所以你必须调用 progress 而不是onUploadProgress
static uploadImageFile(authId, userinfo, file, callback) {
let url = AppConfig.domain + '/api/CoreUploads/uploadImg';
let formData = new FormData();
formData.append('realm', userinfo.realm);
formData.append('fileurl', `users/${userinfo.id}/`);
formData.append('cropData', "");
formData.append('autoid', true);
formData.append('image', file);
return axios.post(url, formData, {
timeout: 1000000,
withCredentials: true,
headers: {
'Authorization': authId,
'Content-type': 'multipart/form-data'
},
progress: function (progressEvent) {
let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
callback(percentCompleted);
}
}).catch(e => {
console.log(e);
});
}