vue 上传裁剪后的图片至七牛云

项目需求：上传图片，支持裁剪大小，并上传至七牛云存储

（效果图预览） 

一、使用步骤

1、引入库

vue-cropper github地址

# npm 安装
npm install vue-cropper

# vue2 局部引入
import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper
}

2、使用

示例中只给出了部分参数配置，可以参考官方文档查看更多参数：

示例中配置的是获取截图的base64数据，所以这里主要介绍将base64格式的图片上传到七牛云的方法。

官方文档——上传base64编码图片到七牛云 （通过javascript方式上传，xhr原生请求）

使用axios上传base64图片到七牛云

//上传图片
uploadImg() {
     let _this = this;
     let pic;
     this.$refs.cropper.getCropData( data => {    // 获取截图的 base64 数据
         pic = data.substring(23);   // 是23!!!!! 去掉头部的 “data:image/png;base64,”（包括base64后面的逗号）
         var url = "http://upload-z2.qiniup.com/putb64/" + this.fileSize(pic);  // upload.qiniup.com 上传域名适用于华东空间。华北空间使用 upload-z1.qiniup.com，华南空间使用 upload-z2.qiniup.com，北美空间使用 upload-na0.qiniup.com。
         
        // axios上传，this.qiniuToken由后端提供
         axios.post(url,pic,{
               headers: {
                   'Content-Type': 'application/octet-stream',
                   'Authorization': "UpToken " + this.qiniuToken    
               },
               signature: 'yes'
          }).then(res => {
               let imgInfo = {
                   name: _this.Name,
                   url: pic,    // 截图的base64路径
                   data: res.data // 上传的截图在七牛云中保存的hash和key值
               };
          }).catch(err => { })
     });
},

// 通过base64编码字符流计算文件流大小
fileSize(str){
   var fileSize;
   if (str.indexOf('=') > 0) {
       var indexOf = str.indexOf('=');
       str = str.substring(0, indexOf); //把末尾的'='号去掉
   }
   fileSize = parseInt(str.length - (str.length / 8) * 2);
   return fileSize;
},

axios请求中的url地址前缀需要根据所在地区变更，参考注释或者上面给出的官方文档都可以。

3、完整代码 

拓展：img标签展示base64图片

           // 静态数据
    // 动态数据