在反应原生 API 请求中上传 base64 图像答案

【问题标题】：Upload base64 image in react native API request在反应原生 API 请求中上传 base64 图像
【发布时间】：2019-03-22 17:42:30
【问题描述】：

我尝试上传裁剪为 600,400 的 base64 图像，当我发出请求时，它告诉我意外令牌“>”，但是当我从裁剪为 20,20 的图像上传时，api 调用有效。所以它是base64长度的问题，似乎我不能太大我也尝试编码，但600,400也太大了。所以我不得不辞职来发送一个小图像，或者有另一种方式。

这是我的图片代码：

ImagePicker.openPicker({
            width: 600,
            height: 400,
            cropping: true,
            includeBase64: true
        }).then(image => {
            uploadPictureVar = 'data:image/jpeg;base64,' + image.data;
            window.picture = uploadPictureVar;
            this.setState({ uploadPicture: uploadPictureVar });
        });

这是我的 api 调用

export function uploadPost(post) {
    let data = {
        body: post.body,
        picture: post.picture,
        type: post.type,
        user: {
            _id: post.user._id,
            name: post.user.name,
            picture: post.user.picture
        }
    }

    var headers = {
        'Content-Type': 'application/json',
        'Access-Control-Origin': '*'
    }

    return fetch(URL + "/uploadPost", {
        method: "post",
        headers: headers,
        body: JSON.stringify(data)
    })
        .then(response => Promise.resolve(response.json()))
        .catch(err => {
            return Promise.reject(err);
        })
}

谢谢

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

是否可以使用 Chrome 检查器查看您从服务器返回的响应。也许后端抛出错误并呈现 HTML 页面，因此错误...意外的'

【讨论】：

【解决方案2】：

我可以使用这个插件解决它：https://github.com/bamlab/react-native-image-resizer

这是我的代码：

ImageResizer.createResizedImage(window.picture, 600, 400, "PNG", 100, 0, null).then((response) => {
                alert(response)
                bodySendNewPost.picture = response.uri;
                // response.uri is the URI of the new image that can now be displayed, uploaded...
                // response.path is the path of the new image
                // response.name is the name of the new image with the extension
                // response.size is the size of the new image
              }).catch((err) => {
                  alert(err)
                // Oops, something went wrong. Check that the filename is correct and
                // inspect err to get more details.
              });

【讨论】：