Question

由于存储在数据库中的file_path，user_id和email，我不知道为何此发布请求在浏览器中不起作用。

在我的日志中，我收到此错误：ErrorException: Trying to get property 'id' of non-object

但是在Postman中完全可以正常工作。首先，我使用下面的端点登录，然后选择一个文件，最后，使用另一个端点上传。使用邮递员将file_path , user_id and电子邮件成功存储在数据库中。

用户登录时（通过浏览器或邮递员）-他们返回访问令牌。我正在尝试在前端代码中使用该访问令牌来识别用户是谁，但我什至不知道我是否做对了。

奇怪的是，我没有在邮递员中使用Bearer令牌，但是一切正常。

那么为什么它在浏览器中不起作用？我的前端代码错误吗？如果是这样，我看不出有什么问题。

这是我的前端代码：

import React, {Component} from 'react';

class Upload extends Component {
    constructor(props) {
        super(props);

        this.state = {
            selectedFile: null,
            id: null,
            email: ''
        };
        this.onFormSubmit = this.onFormSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
        this.fileUpload = this.fileUpload.bind(this);
    }

    componentDidMount() {
        console.log("Inside componentDidMount()");
        let id = localStorage.getItem("id");
        let email = localStorage.getItem("email");
        console.log(id);
        console.log(email);
    }

    onFormSubmit(e) {
        e.preventDefault();
        this.fileUpload(this.state.selectedFile);
    }

    onChange(e) {
        this.setState({ selectedFile: e.target.files[0] });
    }

    fileUpload(file) {
        const formData = new FormData();
        const accessToken = localStorage.getItem("access_token").slice(13,-8);

        console.log(accessToken);
        console.log(this.state.id);
        console.log(this.state.email);
        formData.append('file', file);

        const headers = {
            'Contant-Type' : 'application/json',
            'Authorization' : 'Bearer ' + accessToken,
        }

        fetch('http://127.0.0.1:8000/api/auth/wall-of-fame', {
            method: 'POST',
            body: formData,
            headers: headers
        })
            .then(response => console.log(response))
            .catch(error => { console.error(error) });
    }

    render() {
        return (
            <form encType='multipart/form-data' id="login-form" className="form" onSubmit={this.onFormSubmit}>
                <input type="file" name="file" onChange={this.onChange}/>
                <button type="submit">Upload</button>
            </form>
        );
    }

}

export default Upload;

这是我的FileUpload Controller代码

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;

class FileUploadController extends Controller {

    public function store(Request $request) {
        $filePath = $request->file('file')->getClientOriginalName();
        $user_id = Auth::user()->id;
        $email = Auth::user()->email;

        // dd($user_id, $email);

        $user = Auth::user();

        if($user) {
            $data = [
                'file_path' => $filePath,
                'user_id' => $user_id,
                'email' => $email
            ];
            DB::table('cruskip.photos')->insert($data);
        }

        return response()->json($user);
    }
}

这是我的api.php文件：

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::group([
    'prefix' => 'auth'
], function () {
    Route::post('login', 'AuthController@login');
    Route::post('signup', 'AuthController@signup');
    Route::post('wall-of-fame', 'FileUploadController@store');

    Route::group([
        'middleware' => 'auth:api'
    ], function() {
        Route::get('logout', 'AuthController@logout');
        Route::get('user', 'AuthController@user');
        Route::get('wall-of-fame', 'FileUploadController@fileUpload');
    });
});

这是我的create_users_table：

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

这是我的create_photos_table：

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreatePhotosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->id();
            $table->string('file_path', 200);
            $table->string('email', 200);
            $table->unsignedBigInteger("user_id");
            $table->timestamps();
            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
            $table->foreign('email')->references('email')->on('users')->onDelete('cascade');
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('photos');
    }
}

为什么我的发帖请求可以在Postman中工作，但在浏览器中却不能工作？

0 个答案: