1

我正在使用 DropzoneJS 上传我的图片。所以我的做法是取dropzoneJS生成的base64URL，然后尝试上传如下：

$( document ).ready(function() {


  var endpoint= $("#endpoint").val();

  var unit = {
    name: '',
    description: '',
    image: '',
    base64Image: '',
    themes: []
  }

  $("#create-unit-btn").on("click", function() {

    unit.name = $("#create-name").val();
    unit.description = $("#create-description").val();
    unit.base64Image = $('#imageDropzone')[0].dropzone.files[0].dataURL;

    var data = {
      '_token': $('meta[name=csrf-token]').attr('content'),
      'unit': unit
    }
    console.log(data);

    $.ajax({
      type: "POST",
      url: endpoint,
      data: data,
      success: function(result){
        console.log(result);
      }
    });
  });

  function validate() {

  }

});

然后上传图片，我使用以下代码：

public function create( Request $request ) {

    $data = [];
    $code = 200;
    try {

        $unit = new Unit();
        $unit->name = request()->input('unit.name');
        $unit->description = request()->input('unit.description');
        $url = ImageHandler::StoreBase64ToFile($request->input('unit.base64Image'));
        $unit->image = $url;
        $unit->save();
        $data['unit'] = $unit;

    } catch ( \Illuminate\Database\QueryException $e ) {
        // There was an error
        $code = Response::HTTP_UNPROCESSABLE_ENTITY;
        $data = [];
        $data['error'] = ErrorResponse::create($code, $e->getMessage());
    } catch( ModelNotFoundException $e ) {
        return response()->json(['error' => 'invalid operation'], 406);
    }
    return response()->json($data, $code);

}

ImageHandler 类执行以下操作：

<?php
namespace App\Libraries;

use Storage;

class ImageHandler {
    /**
     * Store a base64 image into the file system this data has to be
     * sended without any header info like:
     *     data:image/png;base64
     * So the info will look something like iVBORw0....hEUgAAAcQ==
     * @param string $base64Data information
     * @param string $filename the filename if not defined then it generates
     *                         a random name
     * @param string $disk disk location, check Storage documentation of
     *                     laravel, by default is stored on the public folder
     *                     so you'll have to run
     *                         php artisan storage:link
     *                     to make the symbolink links
     * @return string url location of the file
     */
    public static function StoreBase64ToFile($base64Data,
        $filename = null,
        $disk = 'public')
    {
        if (strlen($base64Data) < 10) {
            return null;
        }
        $image = base64_decode($base64Data);
        if ($filename == null) {
            $filename = str_random(16);
            $filename .= '_'.time();
            $filename .= '.png';
        }
        $path = 'images/'.$filename;
        $result = Storage::disk($disk)->put($path, $image, 'public');
        if ($result) {
            $url = Storage::disk($disk)->url($path);
            return $url;
        }
        return null;
    }
}

但是当我上传图像时，即使过程正确结束，当我尝试从文件浏览器（MacO 上的查找器）打开文件时，我也看不到上传的图像。我的意思是文件在那里，但我看不到图像的内容，我不知道为什么没有正确上传。

4

1 回答 1

1

存储图像时出现格式错误。为了毫无问题地上传文件，我必须在发送请求之前执行以下操作：unit.base64Image = unit.base64Image.replace("data:image/png;base64,", "");

于 2018-03-30T07:51:51.030 回答