ionic 通过 wp rest api 将图片上传到 wordpress 媒体库

Question

我使用 ionic camera 插件和这个一样 link: https://ionicframework.com/docs/v3/native/camera/

我的服务器是 wordpress，我的 ionic 应用程序也可以上传我的图像文件。我可以从画廊浏览或拍摄新图片。

从相机拍摄新图像后，用户可以单击上传按钮，然后也会出现 base64 文件。然后他可以上传，但 wordpress 无法将其检测为 jpeg 或 png。

而且当我下载它时无法用油漆或类似的东西打开

这是我的代码：

let token = JSON.parse(localStorage.getItem('wpIonicTokenRaahee')).token;
console.log(token);
console.log(this.api_url_post_media);

let headers = new HttpHeaders({
  'cache-control': 'no-cache',
  'Content-Type': 'application/x-www-form-urlencoded',
  'Authorization': `Bearer ${token}`,
  'content-disposition': 'attachment; filename=' + filename + '.jpeg',

});

return this.http.post(this.api_url_post_media, data, { headers: headers });

我测试了任何内容类型，如 image/png image/jpeg 等

请帮助我..我可以通过邮递员上传图片...但我不知道如何将我的 base64 文件转换为二进制文件并将其上传到我的服务器

Answer 1

尝试解决错误后，我找到了解决方案

我们需要先将 base64 文件转换为 blob 二进制文件，然后 post 将其转换为 wordpress。

https://forum.ionicframework.com/t/how-to-convert-base64-into-an-image/118040/4

getBlob (b64Data) {
    contentType = '';
    sliceSize = 512;

    b64Data = b64Data.replace(/data\:image\/(jpeg|jpg|png)\;base64\,/gi, '');

    let byteCharacters = atob(b64Data);
    let byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      let slice = byteCharacters.slice(offset, offset + sliceSize);

      let byteNumbers = new Array(slice.length);
      for (let i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i);
      }

      let byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }

    let blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

我可以用ionic3实现它

1- 使用带 ionic3 的相机 v4

2-使用二进制文件上传

3- 通过选项降低相机质量

4-使用jwt插件进行认证

5-使用http.post方法

我没有任何文件传输经验，但要使用此插件，请使用带 ionic3 的版本 4

6- 如果你愿意，你可以使用 pods 插件来创建新实体并将它们添加到你的 wordpress 你可以搜索 youtube 并找到 Baljeet Singh 的 9 个视频

ionic 通过 wp rest api 将图片上传到 wordpress 媒体库

ionic upload image into wordpress media library via wp rest api

wordpress

postman

wordpress-rest-api

ionic3

angular