1

私のアップロード コードは dropzonejs を使用してうまく機能しています。次のタスクは、アップロードされた画像のサムネイルを作成することです。そして、Image Intervention を使用してサムネイルを作成することができました。唯一の問題は、2 つのタスクを 1 つのメソッドで結合しようとすると、dropzonejs が大量の html コードを返すことです。実際、UploadImage メソッドに return ステートメントを入れるたびに、ランダムな HTML コードが返されます。dropzonejs のドキュメントを読みましたが、コードがどこから来たのかわかりません。アドバイスをいただければ幸いです。ヘルプや提案をお寄せいただきありがとうございます。

以下は私のコードです。

ルート：

Route::post('uploadimage', 'ProductController@uploadImage');

コントローラ：

public function uploadImage(Request $request){

       //create folder
        $products = new Products();

        $args['foldername'] = $request->input('folname');

        $products->createDirectory($args);

        $origName = $request->file('file')->getClientOriginalName();



        $request->file('file')->move(public_path().env('FOLDER_NAME_IMAGES').$args['foldername'].'/', $origName );

        $this->createThumbnail($request);

    }

public function createThumbnail($request){

    $origName = $request->file('file')->getClientOriginalName();
    $image = new Image();
    $file = $request->file('file');
    $objImage = $image->make($file->getRealPath());
    //create thumbnail
    $objImage->save(public_path().env('FOLDER_NAME_IMAGES').'fad611c8-56c7-4a7a-8af9-a2908267f08f'.'/'.$origName)
        ->resize(200,200)            // ->greyscale()
        ->save(public_path().env('FOLDER_NAME_IMAGES').'fad611c8-56c7-4a7a-8af9-a2908267f08f'.'/'.'thumb-'.$origName);

}

JS コード:

var previewNode = document.querySelector("#template");
            previewNode.id = "";
            var previewTemplate = previewNode.parentNode.innerHTML;
            previewNode.parentNode.removeChild(previewNode);

        var myDropzone = new Dropzone(document.body,
        {
            url: "/uploadimage",
            thumbnailWidth: 80,
            thumbnailHeight: 80,
            parallelUploads: 10,
            previewTemplate: previewTemplate,
            clickable: ".fileinput-button",
            previewsContainer: "#previews",
            maxFiles: 10,
            maxFilesize: 200, //  MB
            acceptedFiles: "image/*"
        });

        myDropzone.on("sending", function(file,xhr,formData) {
            // Show the total progress bar when upload starts
            var folname = document.getElementById('folname').value;
            formData.append('folname',folname);
        });

        document.querySelector("#actions .cancel").onclick = function() {
            myDropzone.removeAllFiles(true);
        };

        myDropzone.on("removedfile", function(file,xhr,formData) {
            var file_name = file.name; //filename of image

            var folname = document.getElementById('folname').value;

            console.log(folname);
            console.log(file_name);

            $.ajax({
                type: 'POST',
                url: '/deleteimage',
                data: { 'filename': file_name,'folname': folname },
                success: function(report) {
                    console.log(report);
                },
                error: function(report) {
                    console.log(report);
                }
            });
        });

        myDropzone.on("addedfile", function(file) {
            // Hookup the start button
            //get elementbyid set value to previous + 1
            var val_pic_count = document.getElementById('pic_count').value;
            document.getElementById("pic_count").value = Number(val_pic_count) + 1;
        });

HTML コード:

<div id="actions">
        <div class="btn btn-success fileinput-button">
            <span>Add pictures...</span>
        </div>
         <button type="reset" class="btn btn-warning cancel">
            <span>Remove all</span>
         </button>
    </div> <!--<div id="actions">-->


    <input type="hidden" name="pic_count" id="pic_count" value="0">
    <span dz-max-files-reached ></span>
    <br><br>
    <ul class="list-inline">
        <li>&nbsp;</li>
        <li id="previews">
                <div id="template">
                    <span class="preview"><img data-dz-thumbnail /></span>
                    <span class="name" data-dz-name></span>
                    <strong class="error text-danger" data-dz-errormessage></strong>
                    &nbsp;&nbsp;&nbsp;
                    <span class="pull-right">
                        <button data-dz-remove class="btn btn-danger delete">
                        <span>Delete</span>
                        </button>
                    </span>
                    <div style="height: 10px;"></div>
                </div>
        </li>
         <li>&nbsp;</li>
    </ul>

結果：

ここに画像の説明を入力

createThumbnailメソッドは、個別に試してみると機能しています。

4

1 に答える 1

0

さて、問題が見つかりました。それは私のメソッドのシーケンスであり、最も重要なことは、Intervention オブジェクトに渡される変数が間違っていることです。

したがって、基本的に問題は、既に移動されたファイルを保存しようとしたことです.createThumbnailメソッドは、元のファイルを保存または移動する前に最初に実行する必要があります.

以下の正しいコード。

public function uploadImage(Request $request){

       //create folder
        $products = new Products();

        $args['foldername'] = $request->input('folname');

        $products->createDirectory($args);

        $origName = $request->file('file')->getClientOriginalName();

        $this->createThumbnail($request);    

        $request->file('file')->move(public_path().env('FOLDER_NAME_IMAGES').$args['foldername'].'/', $origName );



    }

また、私の createThumbnail メソッドで getRealPath() メソッドの値を受け入れていないこともわかりました。

以前のコード:

$objImage = $image->make($file->getRealPath());

正しい方法は、 $file 変数を渡すだけです

正しいコード:

$file = $request->file('file');
$objImage = $image->make($file);

また、ランダムなhtmlコードについても。それはランダムではありません。コードの下部を読み逃しただけです。これは基本的にlaravelエラーページのhtmlコードです。問題が解決しました。

于 2016-02-08T23:24:41.693 に答える