在 VueJs + SlimPHP 中输入图像文件

Question

我是 VueJs 的新手，我想使用 vuejs 输入图像文件和一些文本来创建新用户。到目前为止，我已经制作了base64图像，但我不知道如何将这个base64图像传递给服务器中的slim代码。这是我的 Vue 代码：

输入文件

<input class="file-input" type="file" name="userPhoto" @change="uploadPhoto">

方法：

uploadPhoto: function(e){

  var reader = new FileReader()
  reader.readAsDataURL(e.target.files[0])

  reader.onload = (e) => {
    this.usr.user_photo = e.target.result
  }
}

Post :

console.log(this.usr);
this.$http.post('MyAPI', this.usr)
  .then(function(response){
  this.$router.push({path: '/'});
}

console.log 输出这个对象： Image

这是我在 slim post 请求中的代码

$app->post('/api/user/add', function(Request $request, Response $response){

  //Upload Files
  $directory = $this->get('upload_directory');
  $uploadFiles = $request->getUploadedFiles();

  $uploadedFile = $uploadFiles['userPhoto'];
  if($uploadedFile->getError() === UPLOAD_ERR_OK){
      $filename = moveUploadedFile($directory,$uploadedFile);
      $response->write('Uploaded '.$filename.'<br/>');
  }

  function moveUploadedFile($directory, UploadedFile $uploadedFile){
      $extension = pathinfo($uploadedFile->getClientFilename());
      $basename = bin2hex(random_bytes(8));
      $filename = sprinf('%s.%0.8s',$basename, $extension);

      $uploadedFile->moveTo($directory.'/'.$filename);

      return $filename;
  }

  $user_id = $request->getParam('user_id');
  $password = $request->getParam('password');
  $name = $request->getParam('name');
  $status = $request->getParam('status');
  $prodi = $request->getParam('prodi');
  $social_link = $request->getParam('social_link');

  $sql = "INSERT INTO user 
          VALUES (:user_id,:password,:name,:status,:prodi,CURRENT_TIMESTAMP(),'$filename',:social_link)";

    try{
    // Get DB Object
    $db = new db();
    // Connect
    $db = $db->connect();

    $stmt = $db->prepare($sql);

    $stmt->bindParam(':user_id', $user_id);
    $stmt->bindParam(':password', $password);
    $stmt->bindParam(':name', $name);
    $stmt->bindParam(':status', $status);
    $stmt->bindParam(':prodi', $prodi);
    $stmt->bindParam(':social_link', $social_link);

    $stmt->execute();

    echo '{"notice" : {"text": "User Added"}}';


    } catch(PDOException $e){
        echo '{"Error": {"text": }'.$e->getMessage().'}';
    }
});

我已经尝试使用 resteasy 并复制粘贴 "usr" 中的所有对象，但我收到此错误：

500 Internal Server Error

谁能告诉我该怎么做？谢谢

Answer 1

您的 ajax 请求包含 json 编码属性 "user_photo" 中的图像数据，格式为 Data URI scheme。

这不是 "classic" 文件上传，因此此代码无法按预期工作。

$uploadFiles = $request->getUploadedFiles();

相反您可以尝试从 json 数据中读取数据 URI。

$userPhoto = $request->getParam('user_photo');

然后尝试解码数据 URI 字符串并将其保存为文件。

$userPhoto = str_replace("\n", "", $userPhoto);
$userPhotoData = substr($userPhoto, strpos($userPhoto, ',') + 1);

// Decode the base64 string
$userPhotoData = base64_decode($userPhotoData);

// Save the file
file_put_contents('filename.jpg', $userPhotoData);

注意：切勿在 Slim 中使用 echo。请改用响应对象。

$result = [
   'notice' => [
        'text' => 'User Added'
    ]
];

return $response->withJson($result);

在 VueJs + SlimPHP 中输入图像文件

Input Image File in VueJs + SlimPHP

javascript

php

frameworks

slim

vue.js

在 VueJs + SlimPHP 中输​​入图像文件

Input Image File in VueJs + SlimPHP

javascript

php

frameworks

slim

vue.js

在 VueJs + SlimPHP 中输入图像文件