Laravel -如何使用Uppy上传图片

Question

我有这个项目的图像上传，我使用Uppy它。下面是我的代码：

...
<div id="drag-drop-area" name="fotografije[]"></div>
<script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"></script>
    <script>
        var uppy = Uppy.Core()
        .use(Uppy.Dashboard, {
          inline: true,
          target: '#drag-drop-area'
        })
        .use(Uppy.Tus, {endpoint: 'https://master.tus.io/files/'}) //you can put upload URL here, where you want to upload images

      uppy.on('complete', (result) => {
        console.log('Upload complete! We’ve uploaded these files:', result.successful)
      })
    </script>
...

我尝试在div中使用name="fotografije[]"，但当然无济于事。我所需要的就是给这个输入命名，这样我的图像就可以上传到服务器上了。如何使用Uppy执行此操作

Answer 1

所以你需要使用Uppy Dashbord和Laravel下载多个文件

您的后端服务器在https://master.tus.io/files/上吗？如果需要，请进行更正。

然后，你必须得到从前端发送到控制器(在你的后端Laravel中)的请求，该控制器将该请求作为Ajax POST处理。

这可能看起来像(在添加routes.php作为POST之后)

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;

class UploadFileController extends Controller
{


public function showUploadFile(Request $request) {

    $file = $request->file('fotografije');

    //Display File Name just for check or do a dd
    echo 'File Name: '.$file[0]->getClientOriginalName();


    //Move Uploaded File
    $destinationPath = 'uploads';
    $file->move($destinationPath,$file->getClientOriginalName());
 }
}

此外，不要忘记将crsf令牌添加到您的uppy代码中，以避免错误请求。

希望这对你有所帮助