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部分

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