vue.js php 上传图片,vue.js 上传图片并实现裁剪、压缩等功能

之前我发表一篇文章，vue.js 上传图片，可解决平时应用场景的问题，但对复杂的图片处理问题，比如：图片裁剪、压缩等无法解决。

这篇就是来解决这个问题

安装：

npm i vue-core-image-upload --save

在使用上传图片的地方加上：

import VueCoreImageUpload from 'vue-core-image-upload';

components: {

'vue-core-image-upload': VueCoreImageUpload

},

我实际项目的代码片段：

html部分

class="btn weui-btn_plain-default uploadbtn"

:crop="false"

text="upload image"

compress="25"

@imageuploaded="imageuploaded"

@imageuploading="imageuploading"

:max-file-size="5242880"

:credentials="false"

data = {id:1}

url="http://xxx.xxx.com/imgupload.php"

>

js部分：

imageuploading() {

console.log('loading')

this.show_load = true #加载转圈的loading

},

imageuploaded(res) {

this.text = '已上传'

this.imgsrc = res.imgsrc #上传图片到服务器后生成的地址，用来显示预览

this.show_load = false #关闭转圈的loading

}

后台部分(laravel)：

public function imgupload(Request $request)

{

$card = $request->file('files');

$vid = $request->get('id');

$filename = time().str_random(8).'.'.$card->getClientOriginalExtension();

$path = $card->storeAs('public/images/cards',$filename);

$imgsrc = env('APP_URL').Storage::url($path);

$this->investor->updateCard($vid,$imgsrc);

return response()->json(['imgsrc'=>$imgsrc]);

}