입력 이미지 파일이 VueJs + SlimPHP

Question

VueJs에 새로 생겼습니다. 새로운 사용자 생성을 위해 vuejs를 사용하여 이미지 파일과 텍스트를 입력하고 싶습니다. 지금까지 base64 이미지를 이미 만들었지 만이 base64 이미지를 서버의 슬림 코드로 전달하는 방법을 모르겠습니다.

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

포스트 : 여기 내 VUE 코드

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

CONSOLE.LOG 출력이 객체 : Image

여기에 슬림 게시 요청에 내 코드입니다

$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 내부 서버 오류

다른 사람이 어떻게하는지 말해 줄 수 있습니까? 감사합니다

Answer 1

귀하의 ajax 요청에는 json으로 인코딩 된 속성 "user_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); 

주의 : Slim에는 echo을 절대로 사용하지 마십시오. 대신 응답 객체를 사용하십시오.

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

return $response->withJson($result);