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