时间戳

首页 > 解决方案 > 如何通过反应将视频上传到 laravel 存储？

reactjs - 如何通过反应将视频上传到 laravel 存储？

问题描述

因此，很容易找到如何通过 react axios 将图像上传到 laravel 存储的方法，但我一直在努力寻找上传视频的方法。所以这是我想知道的：

1) 我的 jsx 表单应该是什么样子？2) 我的 axios 请求应该是什么样子？3）我的控制器的功能应该如何？

另外，我知道为了上传多个文件，应该有一些更复杂的逻辑发生，所以我想举两个例子：第一个关于如何一次上传多个视频 第二个关于如何上传一个视频

标签： reactjslaravel

解决方案

您可以使用FileReader Javascript API上传视频，该API可以在您的 ReactJS 组件中使用，然后在 Laravel 中几乎与您保存图像（Laravel 文件存储）相同。

1）你的jsx只需要有一些启用了多个属性的输入文件

<input type="file" name="the-name" multiple>

然后使用一个函数，您可以获得一组文件，在本例中为视频。阅读所有视频后，您可以将其添加到反应状态变量中。

// ...React component

handleInputChange = (e)=>{

    // e.target.files is an array of files
    let videos = [];

    // Read each video from the input
    e.target.files.foreach((file, index)=>{
        var reader = new FileReader();
        reader.onload = ()=>{
            // add the file to the array
            videos.push(reader.result);
        }
        reader.readAsDataURL(file);
    });

    this.setState({
         videos: videos
    });
}

2）您的 axios 请求现在应该如下所示

axios.post(url, {
     videos: this.state.videos
}).then(...);

3) 毕竟，在您的 Laravel 控制器中，您将拥有一个数据 uri 视频数组，因此您必须使用 php 函数file_get_contents()获取每个视频数据。

例子：

public function uploadVideos(Request $request){

    $videos = $request->input('videos');

    foreach($videos as $key => $v){

         // Get the video data
         $video = file_get_contents($v);
         // Save the video to the local Laravel disk
         Storage::disk('local')->put('name of the video', $video);

    }

}

注意 使用此示例，您可以上传多个或单个视频文件。

希望这可以帮到你。

推荐阅读