将文件从 angular ionic 上传到本地主机中的 slim php 框架答案

【问题标题】：Upload files from angular ionic to slim php framework in localhost将文件从 angular ionic 上传到本地主机中的 slim php 框架
【发布时间】：2021-06-09 23:24:59
【问题描述】：

您好，我在 localhost 有一个项目，我想将文件上传到本地文件夹，我附上代码以查看是否有人可以帮助我。

HMTL：

<ion-item ion-item *ngFor="let item of lista" menuClose>
  Piso: {{item.piso}} - Nro: {{item.numero}}
  <input type="file" (change)="handleFileInput($event.target.files)" id="file-input"
  accept="image/png, image/jpeg, application/pdf">
  <ion-icon item-end (click)="cargarExpensas(item)" title="Cargar" style="cursor:pointer" name="ios-cloud-upload-outline">
  </ion-icon>
</ion-item>

打字稿：

 handleFileInput(files: FileList) {
this.fileToUpload = files.item(0);}


cargarExpensas() {
this.servicioUpload.postFile(this.fileToUpload).subscribe(data => {
  let toast = this.toastCtrl.create({
    message: 'Expensas cargadas con éxito',
    duration: 3500,
    cssClass: "clsToastCtrl",
  });
  toast.present();
}, error => {
  let toast = this.toastCtrl.create({
    message: 'Se produjo un error, intente nuevamente',
    duration: 3500,
    cssClass: "clsToastCtrlError",
  });
  toast.present();
  console.log(error);
});  }

提供者：

postFile(fileToUpload: File): Observable<boolean> {
    const endpoint = apiUrl + 'api/upload/files/';
    const formData: FormData = new FormData();
    formData.append('fileKey', fileToUpload, fileToUpload.name);
    return this.http
        .post(endpoint, formData, { headers:new HttpHeaders({
            'Content-Type': 'application/json'})
        })
        .map(() => { return true; })

}

我缺少 php 中的代码，我使用的是 slim 框架，有人可以帮助我吗？我也想知道上面的代码是否正确。非常感谢！

【问题讨论】：

标签： angular typescript ionic-framework ionic3 slim

【解决方案1】：

我设法让它工作，以防有人需要我的 php 代码的附加代码:)

 $container = $app->getContainer();
$app->post('/api/upload/files/', function(Request $request, Response $response) {
    $settings = $this->get('settings');
    // $directory = $this->get('upload_directory');
    $uploadedFiles = $request->getUploadedFiles();
    // handle single input with single file upload
    $uploadedFile = $uploadedFiles['fileKey'];

    if ($uploadedFile->getError() === UPLOAD_ERR_OK) {
        $filename = moveUploadedFile($settings["upload_path"], $uploadedFile);
        // $response->write('uploaded ' . $filename . '<br/>');
        $data = array('success' => 'true', 'filename' => $filename);
        $response->withJson($data, 201);
    }
  
});

/**
 * Moves the uploaded file to the upload directory and assigns it a unique name
 * to avoid overwriting an existing uploaded file.
 *
 * @param string $directory directory to which the file is moved
 * @param UploadedFile $uploadedFile file uploaded file to move
 * @return string filename of moved file
 */
function moveUploadedFile($directory, \Slim\Http\UploadedFile $uploadedFile)
{
    $extension = pathinfo($uploadedFile->getClientFilename(), PATHINFO_EXTENSION);
    $basename = bin2hex(random_bytes(8)); // see http://php.net/manual/en/function.random-bytes.php
    $filename = sprintf('%s.%0.8s', $basename, $extension);
    $filepath = $directory . DIRECTORY_SEPARATOR . $filename;
    $uploadedFile->moveTo($filepath);

    return $filename;
}

【讨论】：