javascript - Axios onUploadProgress only fires once on my machine - Stack Overflow

admin管理员组

文章数量:1290258

If I use this fiddle / everything works as expected

(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;
        });
    };
  })();

But if I download the axios examples repo and install the necessary dependencies the callback function, onUploadProgress no longer works as expected. It only fires onUploadProgress once with "100".

Could this be my version of node? It seems like it must be my machine.

If I use this fiddle https://jsfiddle/v70kou59/1/ everything works as expected

(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;
        });
    };
  })();

But if I download the axios examples repo and install the necessary dependencies the callback function, onUploadProgress no longer works as expected. It only fires onUploadProgress once with "100". https://github./axios/axios/tree/master/examples

Could this be my version of node? It seems like it must be my machine.

• javascript
• reactjs
• express
• axios

Share Improve this question Follow asked Oct 16, 2017 at 22:48 mijotamijota 10111 silver badge77 bronze badges 2

• 1 Did you try with a big enough file? Maybe the data doesn't get chunked the same way locally and instantly pletes the upload? – Thomas Hennes Commented Oct 17, 2017 at 0:02
• 1 Yeah I believe this was the issue. Jpegs are too small and it was pleting instantly. My confusion es from that jfiddle example because in that example the progress is gradual and not instant even with jpegs. – mijota Commented Oct 18, 2017 at 15:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

I've had exact issue. One of the reason(it was the case with me) could be, your network is too fast to trigger the progressEvent multiple times.

To simulate this, slow down your network on Network tab of your Browser.

Slow 3G setting worked for me on Google Chrome/New Edge(dev release) browser.

Refer the image:

PS: I know this is too late to answer this. But others might find it helpful when they land here.

Because the new version changed.

So you have to call progress instead of 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);

        });
    }

本文标签： javascriptAxios onUploadProgress only fires once on my machineStack Overflow