无法预览上传的图片[rest api]

Question

我正在尝试从我的 Ionic 应用程序上传到 codeigniter Rest Server，但是当我打开它时无法预览图像。我指的是本教程从应用程序端进行上传 https://www.djamware.com/post/5ae9c9ca80aca714d19d5b9f/ionic-3-angular-5-and-cordova-base64-image-upload-example

这是我在 Ionic App 中的代码：

img = { "data":"", "user_id":"" };

getPhoto() {
  let options = {
    maximumImagesCount: 1
  };
  this.imagePicker.getPictures(options).then((results)=>{
    for(let i=0; i < results.length; i++){
      this.imgPreview = results[i];
      this.base64.encodeFile(results[i]).then((base64File: string) => {
        this.img.data = base64File;
        this.status = true;
      }, (err) => {
        console.log(err);
      });
    }
  });
}

// Function to submit the data to rest api
UploadImages(){
  this.restProvider.postAction('my-rest-api-url', this.img).then((data)=>{
      this.msg = JSON.stringify(data['img']);
      this.restProvider.triggerToastMsg('Images uploaded to gallery.');
  });
}

来自我在 Codeigniter 端的 Rest 服务器：

function uploadImage_post(){
    $postdata = file_get_contents("php://input");
    $data = json_decode($postdata);

    if(!empty($data)){
        $img = $data->data;
        $imgStr = substr($img, strpos($img, "base64,") + 7);
        $imgData = base64_decode($imgStr);
        $imgName = uniqid().'.jpg';

        $imgData = array(
            'author_id'   => $data->user_id,
            'file_src'    => $imgName,
        );

        $this->Gallery_model->createMyGallery($imgData);
        $root = dirname($_SERVER['DOCUMENT_ROOT']);
        $dir = $root.'/my-dir-goes-here';
        file_put_contents($dir.$imgName, $imgData);

        $this->response([
            'http_status_code' => REST_Controller::HTTP_OK,
            'status' => true,
            'statusMsg' => 'OK'
        ], REST_Controller::HTTP_OK);
    }
}

从 api 方面可以看出，$data->data 将生成编码的 base64，类似于 data:image/*;charset=utf-8;base64,/9j/4AAQSkZjRgA....................

因此，为了删除 data:image/*;charset=utf-8;base64,，我使用 substr() 来获取它之后的数据 /9j/4AAQSkZjRgA.................... 然后我才将其解码回来。我设法将它上传到我的服务器目录，但是当我尝试打开图像时，它并没有打开。它会出现类似图像损坏的情况。图像文件大小也很小，为 19 字节

Answer 1

仔细查看您的其余服务器端。您已经两次分配 $imgData 值，这将解码的 base64 值替换为数组值。这就是为什么您在 file_put_contents($dir.$imgName, $imgData); 行的代码无法获取您要保存的图像的原因。

您应该按以下顺序放置代码：

$img = $data->data;
$imgStr = substr($img, strpos($img, "base64,") + 7);
$imgData = base64_decode($imgStr);
$imgName = uniqid().'.jpg';

$root = dirname($_SERVER['DOCUMENT_ROOT']);
$dir = $root.'/my-dir-goes-here';
file_put_contents($dir.$imgName, $imgData);

$imgData = array(
    'author_id'   => $data->user_id,
    'file_src'    => $imgName,
);

$this->Gallery_model->createMyGallery($imgData);

无法预览上传的图片[rest api]

Unable to preview the uploaded image [rest api]

base64

typescript

codeigniter-restserver

ionic-framework