代码之家 › 专栏 › 技术社区 › Widhi

在VueJs+SlimPHP中输入图像文件

slim frameworks vue.js php javascript

1

Widhi · 技术社区 · 8 年前

我是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
  }
}

职位:

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

安慰日志输出此对象: 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().'}';
    }
});

我已经尝试在“usr”中使用resteasy和copy-paste-all对象,但出现了以下错误:

500内部服务器错误

有人能告诉我怎么做吗?谢谢

1 回复 | 直到 8 年前

1

0

odan 8 年前

ajax请求包含json编码的属性“user\u photo”中的图像数据,格式为 Data URI scheme .

这不是一个“经典”的文件上传,所以这段代码不会像预期的那样工作。

$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);

注意:切勿使用 echo 在斯利姆。改用响应对象。

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

return $response->withJson($result);