之前我发表一篇文章,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]);
}