Question

我正在尝试编写一个将手机图像发送到Amazon S3存储桶的应用程序。目前，我正在用png文件测试该应用。一切似乎正常，接受图像未正确格式化以进行Web传输。我尝试了很多不同的方法，但是我没有主意。

我正在这样上传图片：

onChange = () => {
    let newfile = this.refs.file.files[0];
    let reader = new FileReader();
    let url = reader.readAsDataURL(newfile);
    reader.onloadend = () => {
        this.setState({
            ...this.state,
            openModal: true,
            imgSrc : [reader.result],
            imageType: newfile.type,
        })
    }
}

我知道此图片上传有效，因为我可以用...显示图片

<img src={this.state.imgSrc} />

控制台日志记录imgSrc给我一个字符串，该字符串连续26,000个字符"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASQAAAEjCAYAAACb/HxUAAAA..."

我正在向我的Amazon S3存储桶发出放置请求，但无法显示该图像！

var headers= {
                  'Content-Type': this.state.imageType,
                };
return axios.put(signedUrl, this.state.imgSrc, {headers:headers})

当我通过控制台登录Amazon的响应时，它看起来像这样。

{data: "", status: 200, statusText: "OK", headers: {…}, config: {…}, …}
config:
adapter: ƒ xhrAdapter(config)
data: "["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAS"
headers: {Accept: "application/json, text/plain, */*", Content-Type: "image/png"}
maxContentLength: -1
method: "put"
timeout: 0
transformRequest: {0: ƒ}
transformResponse: {0: ƒ}
url: "https://bucket.s3.us-east-2.amazonaws.com/1_1553270707390?Content-Type=image%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-
validateStatus: ƒ validateStatus(status)
xsrfCookieName: "XSRF-TOKEN"
xsrfHeaderName: "X-XSRF-TOKEN"
__proto__: Object
data: ""
headers: {}
request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: "OK"
__proto__: Object

Answer 1

您应该发送的是实际文件（即newfile），而不是您使用data:转换成的readAsDataURL URL。

如何格式化图像以进行Web文件传输

1 个答案: