1

我的上传代码使用 dropzonejs 运行良好，我的下一个任务是为上传的图像创建缩略图。所以我使用了图像干预并且能够创建一个缩略图，我唯一遇到的问题是当我尝试将这两个任务结合在一个方法中时，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

好的，找到问题了。这是我的方法的顺序，最重要的是传递给干预对象的变量是错误的。

所以基本上问题是我试图保存一个已经被移动的文件。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 回答