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 添加之后）

<?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 代码中以避免错误请求。

Answer 2

你可以这样做

 var uppy = new Uppy.Core({

                // debug: (...args) => console.debug(`[Uppy] [${getTimeStamp()}]`, ...args),

                // warn: (...args) => console.warn(`[Uppy] [${getTimeStamp()}]`, ...args),

                // error: (...args) => console.error(`[Uppy] [${getTimeStamp()}]`, ...args),

                autoProceed: true,

                restrictions: {

                    maxFileSize: 2000000,

                    maxNumberOfFiles: 10,

                    minNumberOfFiles: 1,

                    allowedFileTypes: ['image/*']

                }

            });

            uppy.use(Uppy.Dashboard, {

                target: ".UppyDragDrop",

                inline: true,

                showLinkToFileUploadResult: false,

                showProgressDetails: true,

                hideCancelButton: true,

                hidePauseResumeButton: true,

                hideUploadButton: true,

                proudlyDisplayPoweredByUppy: false,

                locale: {} });

Answer 3

你可以这样做

//this function runs after the file is uploaded

uppy.on('upload-success', (file, response) => {

  

  const url = response.uploadURL

  //get the name of file

  const fileName = file.name

  let text = "";

  //append the image after form using jquery/javascript

  //and you can send your images through form

  response.body.data.forEach(function (item, index) {

    text += index + ": " + item ;

    jQuery('<input>').attr({

      type: 'hidden',

      id: '',

      class: 'product_images',

      name: 'filename[]',

      value:item

    }).appendTo('#form_id');

  });

})