vue 上传进度条显示

Question

获取的loaded 和 total为什么都是一样的。但是文件还没有上传成功,正在上传中的，进度条一开始就是百分之百，怎么获取进度条的上传数据

    upladFiles(fileName){
      let formData = new FormData();
      formData.append('file', fileName);
      var config = {
        onUploadProgress: function (e) {
          if(e.lengthComputable){
            console.log(e.loaded) // 25088
            console.log(e.total) // 25088
            console.log(e.loaded / e.total)  // 1
          }
        }
      }
      axios.post(`/qwl/elderinfo/importElder`,
      formData, config).then((info) => {
        if (info.code === 0) {
          this.dialogdeilds = false
          this.$emit('elderlist')
          this.$message({
            showClose: true,
            message: '操作成功',
            type: 'success'
          })
        }
      })
    },

Answer 1

你的文件太小了，一次传完，所以回调一次
文件大点的话，有进度显示的，你可以用chrome的network 模拟一下3G

代码部分

 <input type="file" id="file">
    <script>
        var d = document.getElementById('file');
        d.addEventListener('change', function (e) {
            if (e.target.files.length === 0) {
                return;
            }
            const fd = new FormData();
            fd.append("file", e.target.files[0]);

            axios.post('https://up.qbox.me', fd, {
                onUploadProgress: function (e) {
                    console.log(e)
                }
            })
        });
    </script>

Answer 2

        upladFiles(fileName) {
            let formData = new FormData();
            formData.append('file', fileName);
            return axios
                .post('/qwl/elderinfo/importElder', formData,{
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                    onUploadProgress: progressEvent => {
                        let complete = parseInt((progressEvent.loaded / progressEvent.total));
                        console.log('上传进度' + complete);
                        }
                 
                    }
                })
                .then(({ data }) => data);
        },

Answer 3

楼主这种情况应该是在火狐中出现的吧，谷歌是没有问题的，但火狐上total和loaded 是一样大小

Answer 4

感觉上传是上传成功了，但是服务器啥时候给你响应，你并不能确定呀

比如你发了一个 1M 的文件通过 100k/s 的。10s发送完，但是服务端有可能挂起了你 20s。这个时间是没有预期的。