Laravel 上传图片,上传后查看

Laravel 上传图片,上传后查看,laravel,angular5,Laravel,Angular5,我正在尝试上传Angular 5.2和Laravel 5.5中的个人资料图片。我可以成功地将图像上载到本地存储中的单独文件夹。然后我想显示上传的图片,就像在facebook上一样。然后我可以查看上传的图像,但它不会上传到文件夹。这是我当前的代码。它通过在append,event下面加下划线来显示错误 uploadFile(event) { if (event.target.files.length > 0) { const reader = new FileReader(); r

我正在尝试上传Angular 5.2和Laravel 5.5中的个人资料图片。我可以成功地将图像上载到本地存储中的单独文件夹。然后我想显示上传的图片,就像在facebook上一样。然后我可以查看上传的图像,但它不会上传到文件夹。这是我当前的代码。它通过在append,event下面加下划线来显示错误

 uploadFile(event) {
if (event.target.files.length > 0) {
  const reader = new FileReader();
  reader.append('myfile', elem.files[0]);
  reader.readAsDataURL(event.target.files[0]);
  reader.onload = (event) => {
    this.url = event.target.result;
  };
  this.fileService.sendFile(reader).subscribe(
        (response) => {
          console.log(response);
        });}
 }
这里有可以上传到文件夹的代码和laravel代码

uploadFile(event){    
const elem = event.target;  
if(elem.files.length > 0){     
  const formData = new FormData();  
  formData.append('myfile', elem.files[0]);  
  this.fileService.sendFile(formData).subscribe( 
    (response) => {
console.log(response);
    }); }
elem.value = ""; 
}
uploadFile(event) {
if (event.target.files.length > 0) {
  const reader = new FileReader();
  const formData = new FormData();
  formData.append('myfile', event.target.files[0]);
  reader.readAsDataURL(event.target.files[0]);
  reader.onload = (event) => {
    this.url = event.target.result;
  };
  this.fileService.sendFile(formData).subscribe(
        (response) => {
          console.log(response);
        });
}
event.target.value = '';
}
服务文件

export class FileService {

constructor(private httpClient: HttpClient) { }

sendFile(formData: any) {
  const baseUrl = 'http://127.0.0.1:8000/api';
  const url = `${baseUrl}/file`;
  return this.httpClient.post(
  url,
  formData);
  }
 }
这是我在拉威尔的文件控制器

<?php

 namespace App\Http\Controllers;
 use Illuminate\Http\Request;

 class FileController extends Controller
 {
  public function saveFile(Request $request){

    $File = $request -> file('myfile'); 
          $sub_path = 'files'; 
          $real_name = $File -> getClientOriginalName(); 

          $destination_path = public_path($sub_path);  

          $File->move($destination_path,  $real_name); 
          return response()->json('File Save');
         }
       }

我可以上传图像到本地存储的文件夹,同时我可以使用以下代码查看它。但它仍然显示了一个错误的结果。我需要知道这样做的正确方法

错误TS2339:类型“”上不存在属性“result” 事件目标'

代码在这里

uploadFile(event){    
const elem = event.target;  
if(elem.files.length > 0){     
  const formData = new FormData();  
  formData.append('myfile', elem.files[0]);  
  this.fileService.sendFile(formData).subscribe( 
    (response) => {
console.log(response);
    }); }
elem.value = ""; 
}
uploadFile(event) {
if (event.target.files.length > 0) {
  const reader = new FileReader();
  const formData = new FormData();
  formData.append('myfile', event.target.files[0]);
  reader.readAsDataURL(event.target.files[0]);
  reader.onload = (event) => {
    this.url = event.target.result;
  };
  this.fileService.sendFile(formData).subscribe(
        (response) => {
          console.log(response);
        });
}
event.target.value = '';
}