之前我發(fā)表一篇文章枣抱，vue.js 上傳圖片，可解決平時應(yīng)用場景的問題，但對復(fù)雜的圖片處理問題愿卸，比如：圖片裁剪灵临、壓縮等無法解決。
這篇就是來解決這個問題
這次使用第三方資源包：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"<!-- 上傳完成調(diào)用 -->
@imageuploading="imageuploading"<!-- 正在上傳調(diào)用 -->
:max-file-size="5242880"
:credentials="false" <!-- 不進行接口驗證 -->
data = {id:1} <!-- 傳遞其他參數(shù) -->
url="http://xxx.xxx.com/imgupload.php" <!-- 上傳圖片的ajax接口 -->
>
</vue-core-image-upload>
</cell>
</group>
js部分：
imageuploading() {
console.log('loading')
this.show_load = true #加載轉(zhuǎn)圈的loading
},
imageuploaded(res) {
this.text = '已上傳'
this.imgsrc = res.imgsrc #上傳圖片到服務(wù)器后生成的地址趴荸，用來顯示預(yù)覽
this.show_load = false #關(guān)閉轉(zhuǎn)圈的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]);
}
