时间戳

首页 > 解决方案 > 如何为网络文件传输格式化图像

javascript - 如何为网络文件传输格式化图像

问题描述

我正在尝试编写一个将图像从手机发送到 Amazon S3 存储桶的应用程序。目前我正在使用 png 文件测试应用程序。一切似乎都可以接受图像没有正确格式化以进行网络传输。我尝试了许多不同的东西，但我没有想法。

我正在像这样上传我的图片：

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 存储桶发出 put 请求，但无法显示图像！

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

当我控制台记录来自亚马逊的响应时，它看起来像这样。

{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

标签： javascriptamazon-web-servicesvalidationpngaxios

解决方案

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

推荐阅读