上传图片,上传后查看 [英] Upload Image and View it After Uploading
问题描述
我正在尝试在 Angular 5.2 和 Laravel 5.5 中上传个人资料图片.我可以将图像成功上传到本地存储中的单独文件夹.然后我想显示与 facebook 相同的上传图像.然后我可以查看上传的图像,但它没有上传到文件夹.这是我当前的代码.它通过在追加、事件下划线来显示错误.
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:类型结果"不存在属性结果"事件目标'.
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 = '';
}
这篇关于上传图片,上传后查看的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!