axios API 在文件准备好后调用

Question

我正在尝试将文件上传到服务器。

const uploadFileCall = (file) => {
  const formData = new FileReader();
  formData.readAsArrayBuffer(file);

  return axios({
    method: 'post',
    url: `file/${file.name}`,
    data: {
      fileContent: formData.result,
    },
  });
};

如何等待调用 api 直到 formData 准备好？我应该使用回调还是创建一个新的承诺来等待准备好的文件？

Answer 1

您可以使用 FileReader API 使用 onload() 方法处理它

看看这个link文档很清楚。您应该能够使用此示例调整您的代码。

Answer 2

您必须从 axios 号召性用语中回拨。

//post Call
    function postCall(url, data, callbackProgressUpload = null) {
        Date.prototype.toJSON = function () {
            return moment(this).format();
        }
        const requestOptions = {
            method: 'POST',
            headers: authHeader(),
            body: JSON.stringify(data),
            onUploadProgress: function (progressEvent) {
                // var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
                if (callbackProgressUpload)
                    callbackProgressUpload(progressEvent);
            }
        };
        return axios.post(baseUrl + url, data, requestOptions).then(
            response => {
                return response;
            }
        ).catch(function (error) {
            return Promise.reject(error);
        });
    }
    *************************************
    //service Call
    function storeFiles(imagesData, orderId, folder, callback) {
      return SC.postCall(`${url}`, fileData, (response) => {
        callback(response);
      }
      );
    }
    
    ********************************
    //action
    export function storeFiles(imagesData, orderId, folder) {
        return dispatch => {
            return orderService.storeFiles(imagesData, orderId, folder, (progress) => {
                var percentCompleted = Math.round((progress.loaded * 100) / progress.total);
                console.log('percentCompleted', percentCompleted)
            }).then(
                response => {
                    return response;
                },
                error => {
                    return Promise.reject(error);
                }
            )
        }
    }

axios API 在文件准备好后调用

axios API call after file is ready

javascript

upload

reactjs

axios