使用图片角度和 laravel 添加数据答案

【问题标题】：add data with picture angular & laravel使用图片角度和 laravel 添加数据
【发布时间】：2021-09-14 19:44:44
【问题描述】：

我有角度函数 insertData ：

insertData(){
    this.service.insertAnnonce(this.annonce).subscribe(res=>{
        console.log(res);
    })

效果很好

这是我的模型：

export interface IPost {
    id              :number;
    user_id         :string ;
    picture         :string;
    title           :string;     
    description     :string;      
    price           :number;
    category_id     :number ;
    Modele          :string;  
    BoiteDeVitesse  :string;     
    AnneeModele     :number;      
    Marque          :string;
    YearOfRegistration:number ;
    TypePost        :string;   
    PuissanceFiscale:string;   
    PuissanceDIN    :string;   
    Kilometrage     :number;
    NombreDePortes  :number;
    NombreDePlaces  :number;
    carburant       :string;   
    Permis          :boolean;
    data: IPost[];
}

这是图片的myFunction：

onSubmitform(f: NgForm) {
    var myFormData = new FormData();
    const headers = new HttpHeaders();
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');
    myFormData.append('image', this.filedata);
    /* Image Post Request */
    this.service.insertAnnonce(this.annonce).subscribe(res=>{
        console.log(res);
    })
    this.http.post('http://127.0.0.1:8000/api/AddImage/', myFormData, {
        headers: headers
    }).subscribe(data => {

    });  
}

而且效果也很好

这是控制器背面：

  public function add(Request $request){
    $p=new PostVehicule();
    $p->title=        $request->title;
    $p->description=  $request->description;
    $p->price=        $request->price;
    $p->TypePost=     $request->TypePost;
    $p->category=      $request->category;
    $p->Modele=        $request->Modele;
    $p->Marque=        $request->Marque;
    $p->BoiteDeVitesse=$request->BoiteDeVitesse;
    $p->AnneeModele=$request->AnneeModele;
    $p->PuissanceFiscale=$request->PuissanceFiscale;
    $p->Kilometrage=$request->Kilometrage;
    $p->NombreDePortes=$request->NombreDePortes;
    $p->NombreDePlaces=$request->NombreDePlaces;
    $p->carburant=$request->carburant;

 /*   if ($request->hasFile('image')) {
        $image_file = $request->file('image');
        $img_extension = $image_file->getClientOriginalExtension();
        $img_filename = time() . '.' . $img_extension;
        $path ='C:/ionic/data/';
        $image_file->move($path, $img_filename);
        $p->image = $img_filename;
    }*/
    
    if($p->save()){
        //return new PostResource($post); 
        return response()->json(['message'=>'post added successfult']);
 }
}
public function uploadimage(Request $request) {
    $p=new PostVehicule();
    if ($request->hasFile('image')) {
        $image_file = $request->file('image');
        $img_extension = $image_file->getClientOriginalExtension();
        $img_filename = time() . '.' . $img_extension;
        $path ='C:/ionic/data/';
        $image_file->move($path, $img_filename);
        $p->image = $img_filename;
    }
    if($p->save()){
        //return new PostResource($post); 
        return response()->json(['message'=>'Image added successfult']);
 }

}

所以我的问题是当我像这张图片一样单独插入数据时。

如何合并这两个函数以使数据库中只有一个结果？

【问题讨论】：

我可以看看你后端存储表单数据的代码吗？
@XeonNetwork 是的，我更新了我的问题并添加了我的后端
如果您以顺序方式分别调用这些方法，您可以将生成模型的 id 传递给第二个函数，然后更新现有模型。
@MohammadMirsafaei 我这样调用第二个函数中的第一个函数 ` $p = $this->add($request); ` 但出现新错误“BadMethodCallException: Method Illuminate\Http\JsonResponse::save 不存在。
看起来您正在订阅观察者，而没有跟踪他们以便稍后取消订阅。请让您致电pipe(first()) 或取消订阅您的订阅。这将防止任何内存泄漏。

标签： angular laravel api

【解决方案1】：

我不知道您为什么为此使用 2 个单独的函数，但问题是您在两个函数中都创建了新对象 ($p=new PostVehicule();)。如果您坚持编写 2 个函数，则应将最初创建的同一对象传递给第二个对象。 $p = $this->add($request); 你在 cmets 中提到的不返回 PostVehicule 对象，它返回一个 http 响应。你应该改变它：

if($p->save()){
        return $p;
 }

【讨论】：

我随你说的改变了，我成功了，但是在数据库中他只是添加了所有没有图片的数据
如果我在第一个函数中添加函数图片的内容，它可以正常工作，并且在数据库中添加也很好，但在前端他不工作
@rachedcherif 你能解释一下当你添加代码上传代码到add方法时前端的错误是什么？（另外，不要害怕提供更多信息；说“前端不起作用”不会给我太多信息。）
@XeonNetwork 在前端的问题是当我添加带有他的图片的帖子时，图片已添加到数据库中但其余数据没有，这是我的功能：
insertData(){ let formdata = new FormData(); formdata.append('image', this.filedata); formdata.append('data',JSON.stringify(this.annonce)); this.service.insertAnnonce(formdata).subscribe(res=>{ console.log(res); }) `filedata:any;文件事件（事件）{ this.filedata = event.target.files[0]; }`

【解决方案2】：

这不是最好的代码，但我会试一试。这只会将它存储在 Laravel 应用程序的公共文件夹中。

确保导入Illuminate\Support\Facades\Storage

在此处查看文件系统 API 的文档：https://laravel.com/docs/8.x/filesystem

    public function store(Request $request)
    {
        // This will store it in the public folder of your root (every file stored in public is exposed to the internet)
        if ($request->hasFile('image')) {
            Storage::disk('local')->putFileAs('/public', $request->image, $request->image->getClientOriginalName());
        }

        // sorry man. I don't feel like fixing this block of code at the moment (I'm supposed to be studying)
        $p = new PostVehicule();
        $p->title =        $request->title;
        $p->description =  $request->description;
        $p->price =        $request->price;
        $p->TypePost =     $request->TypePost;
        $p->category =      $request->category;
        $p->Modele =        $request->Modele;
        $p->Marque =        $request->Marque;
        $p->BoiteDeVitesse = $request->BoiteDeVitesse;
        $p->AnneeModele = $request->AnneeModele;
        $p->PuissanceFiscale = $request->PuissanceFiscale;
        $p->Kilometrage = $request->Kilometrage;
        $p->NombreDePortes = $request->NombreDePortes;
        $p->NombreDePlaces = $request->NombreDePlaces;
        $p->carburant = $request->carburant;
        $p->image = $request->hasFile('image') ? $request->image->getClientOriginalName() : NULL;

        if ($p->save())
        {
            return response()->json(['message' => 'Post created successfully']);
        }
    }

【讨论】：