前端压缩图片并转化为base64编码，后端laravel接受并存储图片

第一步：前端压缩图片

function dealImage(path, obj) {
 var
 img = new Image();
 img.src = path;
 img.onload = function () {
 var
 that = this;
 var
 w = that.width,
 h = that.height,
 scale = w / h;
 w = obj.width || w;
 h = obj.height || (w / scale);
 var quality = obj.quality || 0.7;
 var canvas = document.createElement('canvas');
 var ctx = canvas.getContext('2d');
 var anw = document.createAttribute("width");
 anw.nodeValue = w;
 var anh = document.createAttribute("height");
 anh.nodeValue = h;
 canvas.setAttributeNode(anw);
 canvas.setAttributeNode(anh);
 ctx.drawImage(that, 0, 0, w, h);
 if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
 quality = obj.quality;
 }
 var base64 = canvas.toDataURL('image/jpeg', quality);
 dd = base64;
 }
 return dd;
}
var dd = dealImage("img/timg.jpg", {width: 400, quality: 0.7});
window.onload = function () {
 console.log(dd);
}
获取到base64编码后，通过post方式传到后台服务器，和表单提交数据一样。

第二步：laravel 设置

要获得前端传递的数据，在Middleware/VerifyCsrToken.php中把接口地址添加例外，如下

class VerifyCsrfToken extends Middleware
{
 protected $except = [
 'updateUserInfo',
 ];
}

另外可能还会涉及数据跨域问题，在laravel接口控制器中添加允许跨域代码，如下：

<?php

namespace App\Http\Controllers;
header('Access-Control-Allow-Origin:*');

控制器接受代码如下：

 $data=$request->all();
 $imgdata=$imgdata['imgurl'];
 $base64_str = substr($imgdata, strpos($imgdata, ",")+1);
 $image=base64_decode($base64_str);
 $imgname=rand(1000,10000).time().'.png';
 Storage::disk('public')->put($imgname,$image);
 echo $imgname;//获取到图片名称后存储到数据库中，供以后使用。

图片使用：

首页使用 Artisan 命令 storage:link 来创建符号链接：

php artisan storage:link

在视图中即可通过asset()使用图片，代码如下：

<img src="{{asset('storage/lijian.png')}}">