Croppa 裁剪头像，上传到oss，再提交给后台接口（ajax请求，保存赋值给全局变量没有用的解决方案）

插件网址

https://zhanziyang.github.io/vue-croppa/#/demos

第一步：npm

npm install --save vue-croppa

第二步：main.js引入

import 'vue-croppa/dist/vue-croppa.css'
import Vue from 'vue'
 import Croppa from 'vue-croppa'
 Vue.use(Croppa)       

第三步：html页面代码

  <croppa v-model="croppa" :show-remove-button="true" :width="160" :height="160" :prevent-white-space="true" initial-size="natural"></croppa>
   <Button style="width: 100px" type="primary" size="large" long :loading="sourloading" @click="upload">提交</Button>
   
// 这个插件里面有许多属性
几个常用的：
show-remove-button="true"   是否显示右上角的 × 叉叉
prevent-white-space="true"  禁止有白框的出现  //具体效果自己试一下
disabled=true    禁止选择
initial-size="natural"   初始尺寸

https://www.npmjs.com/package/vue-croppa // 具体属性值有哪些可以自己去看一下

第四步：js 部分

创建一个变量
data(){
          return{
			 croppa: {},
			 fileimgid :'',
			 }
			 }

 methods:{
        //图片裁剪
          upload(){
            if (!this.croppa.hasImage()) {
              alert('暂无图片')
              return
            }
            this.croppa.generateBlob((blob) => {
            
              var fd = new FormData()
              // !！！！！！！重点说明，这里，必须要保存一个指向，要不然success 里面的this不是指向全局的，全局变量保存
              也就没有用，
              //!!!!!!!!!!!!!!!!!!!!!!!!!
              var that  = this
              
              fd.append('file', blob, 'filename.jpg')
              fd.append('other', 'blahblahblah')
              $.ajax({
                url: this.uploadAction,    // 这里是你上传到oss 或者其他服务器的地址，我直接把地址赋值给全局变量
                data: fd,
                async:false,  // 这里也必须异步请求！！！
                type: 'POST',
                processData: false,
                contentType: false,
                success: function (data) {
                  if(data.errcode == 2000){
                    that.fileimgid  = data.result
                    // 调用第二个接口
                    that.Editall()
                  }
                }
              })
            })
        },
          Editall(){
       
            console.log(this.fileimgid)
            // 下面是提交的请求  这里是第二个请求，可以自己写了，写太多反而更乱
            
                 }

ajax请求，保存赋值给全局变量没有用的解决方案

怕有的人不看代码，在这里再写一下
1、 async:false, // 异步
2、保存this的指向(写在请求之前)
var that = this

如有疑问或者本文有什么出错的地方，欢迎评论