Question

我的上传代码使用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 code：

<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 方法正在运行。

Answer 1

好的，发现了问题。这是我方法的顺序，最重要的是传递给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代码。问题解决了。

Dropzonejs +图像干预php返回值是随机的html代码

1 个答案: