Javascript 如何使用React将文件上载到axios的S3 bucket中，以及如何使用aws sdk将文件预签名？

在看到这么多关于将文件上传到S3的帖子后，我觉得似乎没有任何办法。我用这种方法结束了几篇文章，我真的不知道我做错了什么

presignedUrl

我使用节点服务器上的

aws sdk

获得它，这一切都很好，但当使用以下方法上载实际文件时，它返回协议错误

获取文件并请求签名

let file = target.files[0];
    // Split the filename to get the name and type
    let fileParts = target.files[0].name.split('.');
    let fileName = formatFilename(fileParts[0]);
    let fileType = fileParts[1];

    const { signedRequest } = await axios.post('/upload', { fileName, fileType })

创建一个

FormData

var bodyFormData = new FormData();
    bodyFormData.append('image', file)
    bodyFormData.append('name', fileName)

然后我会上传文件

const uploadImageRequest = {
        method: 'PUT',
        url: signedRequest,
        body: bodyFormData,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }

    axios(uploadImageRequest)
        .then(result => {
            console.log("Response from s3", result)
        })
        .catch(error => {
            console.log("ERROR ", error);
        })

最后，它返回以下错误

ERROR  TypeError: Cannot read property 'protocol' of undefined
    at isURLSameOrigin.js:57
    at xhr.js:109
    at new Promise (<anonymous>)
    at e.exports (xhr.js:12)
    at e.exports (dispatchRequest.js:50)

错误类型错误：无法读取未定义的属性“协议”
在isURLSameOrigin.js:57
在xhr.js:109
在新的承诺（）
at e.exports（xhr.js:12）
at e.exports（dispatchRequest.js:50）

确保您在axios中使用的url（signedRequest）不是未定义的

正如我所说，我从后端获得了已签名的url。问题是在此处上载文件时：

const{signedRequest}=wait axios.post（'/upload'，{fileName，fileType}）

很可能您在axios中使用的url未定义是否确实signedRequest未定义？您是对的。愚蠢的我。响应是

data.data.signedRequest

not

signedRequest