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>

...

我试过name="fotografije[]"indiv但当然没有帮助。我所需要的只是命名这个输入，以便我的图像可以上传到服务器。我怎样才能做到这一点Uppy？

Answer 1

所以你需要使用 Uppy Dashbord 和 Laravel 下载多个文件然后你必须取回从前端发送到控制器（在你的后端 Laravel 中）的请求，该控制器将此请求作为 Ajax POST 处理。这可能看起来像（在 routes.php 作为 POST 添加之后）<?phpnamespace 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 代码中以避免错误请求。

Answer 2

你可以这样做&nbsp;var uppy = new Uppy.Core({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // debug: (...args) => console.debug(`[Uppy] [${getTimeStamp()}]`, ...args),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // warn: (...args) => console.warn(`[Uppy] [${getTimeStamp()}]`, ...args),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // error: (...args) => console.error(`[Uppy] [${getTimeStamp()}]`, ...args),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; autoProceed: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; restrictions: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxFileSize: 2000000,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxNumberOfFiles: 10,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minNumberOfFiles: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; allowedFileTypes: ['image/*']&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; uppy.use(Uppy.Dashboard, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: ".UppyDragDrop",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inline: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showLinkToFileUploadResult: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showProgressDetails: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hideCancelButton: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hidePauseResumeButton: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hideUploadButton: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; proudlyDisplayPoweredByUppy: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; locale: {} });

Answer 3

你可以这样做//this function runs after the file is uploadeduppy.on('upload-success', (file, response) => {&nbsp;&nbsp;&nbsp; const url = response.uploadURL&nbsp; //get the name of file&nbsp; const fileName = file.name&nbsp; let text = "";&nbsp; //append the image after form using jquery/javascript&nbsp; //and you can send your images through form&nbsp; response.body.data.forEach(function (item, index) {&nbsp; &nbsp; text += index + ": " + item ;&nbsp; &nbsp; jQuery('<input>').attr({&nbsp; &nbsp; &nbsp; type: 'hidden',&nbsp; &nbsp; &nbsp; id: '',&nbsp; &nbsp; &nbsp; class: 'product_images',&nbsp; &nbsp; &nbsp; name: 'filename[]',&nbsp; &nbsp; &nbsp; value:item&nbsp; &nbsp; }).appendTo('#form_id');&nbsp; });})