通过 React 和 axios 将多个图像上传到 laravel 存储时发生 500 内部服务器错误

Question

每当我尝试在 laravel

中存储图像时，我都会收到 500 内部服务器错误

这是我的 jsx:

<form onSubmit={this.handleSubmit} className={"dashboard-cards-form"} encType={"multipart/form-data"} >
      <div className={"dashboard-cards-title"}>Atvirutės</div>
      <input onChange={this.handleFileChange} type="file" className={"dashboard-cards-input"} name="dashboard-cards-input" id="dashboard-cards-input" multiple={true}/>
      <label className={"dashboard-cards-label"} htmlFor="dashboard-cards-input">Pasirink atvirutes</label>
      <input type={"submit"} value={"Įkelk"} className={"dashboard-cards-submit"}/>
</form>

这是我的 handleFileChange:

handleFileChange = (e) =>{
        if (e.target.files) {
            const files = Array.from(e.target.files);

            const promises = files.map(file => {
                return (new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.addEventListener('load', (ev) => {
                        resolve(ev.target.result);
                    });
                    reader.addEventListener('error', reject);
                    reader.readAsDataURL(file);
                }))
            });

            Promise.all(promises).then(images => {
                this.setState({
                    imageArray: images
                })
            }, error => { console.error(error); });
        }
    };

这是我的 handleSubmit:

async handleSubmit (e){
        e.preventDefault();
        var self = this;
        var cookie = new Cookie();
        const formData = new FormData();
        this.state.imageArray.forEach((image_file) => {
            formData.append('file[]', image_file);
        });

        axios({
            method: 'post',
            url: '/api/admin/uploadCards',
            data: formData,
            headers: {
                'Authorization' : 'Bearer ' + cookie.get('access_token'),
                "Content-type": "multipart/form-data"
            }
        })
            .then(function (response) {
                console.log(response.data);
                self.setState({
                 imageArray: []
                });
            })
            .catch(error => {
               console.log(error)
            })
    };

这是我的 laravel 控制器：

public function uploadCards(Request $request) {
        if ($request->get('file')) {
            foreach ($request->get('file') as $file) {
                $name = time() . '.' . explode('/', explode(':', substr($file, 0, strpos($file, ';')))[1])[1];
                Image::make($file)->save(public_path('cards/') . $name);
            }
            return response(['upload' => 'success']);
        }
        return response(['upload' => 'error no files ']);
    }

如果我注释掉 Image::make($file)->save(public_path('cards/') . $name); 我会收到回复，我也尝试使用 laravel Storage::put() 但它始终是相同的 500 错误

我可以获取 base64 代码，我可以获取名称，但是存储已经耗尽我 3 天了，我已经浏览了 Whosebug 并尝试了所有方法，但是我找不到我丢失的东西

Answer 1

只是做一个答案，这样你就可以结束你的问题了

要做的第一件事：
总是看日志。

如您所述，已记录

local.ERROR: Can't write image data to path (C:\laravel\sveikinimai2019\public\cards/1564144716.jpeg) {"userId":5,"exception":"[object]

所以我们知道问题出在保存图像的时候。这种消息一般与权限或目录丢失有关。

因为你想要 public/assets/cards/ 但提供了 public/cards/ 通过改变 Image::make($file)->save(public_path('cards/') . $name); 到 Image::make($file)->save(public_path('assets/cards/') . $name); 将解决您的问题

通过 React 和 axios 将多个图像上传到 laravel 存储时发生 500 内部服务器错误

500 internal server error while upload multiple images via react and axios into laravel storage

laravel

reactjs

intervention

axios