上传图片并在上传后查看

问题描述：

我正在尝试在Angular 5.2和Laravel 5.5中上传个人资料图片.我可以成功将图像上传到本地存储中的单独文件夹中.然后，我想显示与Facebook中相同的上载图像.然后，我可以查看上载的图像，但它不会上载到该文件夹.这是我当前的代码.它通过在append，event下划线显示错误.

I'm trying to upload a profile picture in Angular 5.2 and Laravel 5.5. I could able to upload successfully a image to a separate folder in local storage. Then I wanted to display that uploaded image same as in facebook. Then I could view the uploaded image but it doesn't uploading to the folder. This is my current code.It shows errors by underlining 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代码上传到文件夹的代码在这里.

Code which can upload to the folder with laravel code is here.

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 = ""; 
}

服务文件

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

这是我在laravel中的文件控制器

Here is my filecontroller in laravel

<?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');
         }
       }

使用波纹管代码，打开图像后即可查看图像.

Using bellow code I could view the image after opening the image.

url = '';
onSelectFile(event) {
if (event.target.files && event.target.files[0]) {
  var reader = new FileReader();

  reader.readAsDataURL(event.target.files[0]); // read file as data url

  reader.onload = (event) => { // called once readAsDataURL is completed
    this.url = event.target.result;
  } 
 }
}

答

我可以将图像上传到本地存储中的文件夹中，同时可以使用以下代码查看它.但是仍然显示结果错误.我需要知道正确的方法.

I could able to upload the image to the folder in local storage and same time I could view it using following code. But still it showing an error on result. I need to know the correct way of doing this.

错误TS2339:类型"上不存在属性结果"EventTarget".

error TS2339: Property 'result' does not exist on type ' EventTarget'.

代码在这里.

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 = '';
}

上传图片并在上传后查看

相关推荐