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

之前我发表一篇文章，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部分

      
          
            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]);
    }