之前我发表一篇文章，vue.js 上传图片，可解决平时应用场景的问题，但对复杂的图片处理问题，比如：图片裁剪、压缩等无法解决。
这篇就是来解决这个问题
这次使用第三方资源包：Vue-Core-Image-Upload
安装：
npm i vue-core-image-upload --save
在使用上传图片的地方加上：
import VueCoreImageUpload from 'vue-core-image-upload';
components: {
'vue-core-image-upload': VueCoreImageUpload
},
我实际项目的代码片段：
html部分
<group>
<cell title="上传名片" is-link value-align="left">
<vue-core-image-upload
class="btn weui-btn_plain-default uploadbtn"
:crop="false" <!-- 不裁剪-->
text="upload image"
compress="25" <!-- 压缩到25%-->
@imageuploaded="imageuploaded"<!-- 上传完成调用 -->
@imageuploading="imageuploading"<!-- 正在上传调用 -->
:max-file-size="5242880"
:credentials="false" <!-- 不进行接口验证 -->
data = {id:1} <!-- 传递其他参数 -->
url="http://xxx.xxx.com/imgupload.php" <!-- 上传图片的ajax接口 -->
>
</vue-core-image-upload>
</cell>
</group>
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]);
}
