RuoYi-Vue——裁剪区域头像回显的跨域问题

        使用若依的小伙伴都知道,若依的头像上传默认是创建文件夹保存图片,但我们在实际开发中常常需要把图片保存在oss上,当我们修改头像后,再次修改头像就会出现跨域问题,裁剪区域无法显示图片,下面我将分享一下我的解决办法:

1.出现跨域,是使用了vue-cropper组件

 RuoYi-Vue——裁剪区域头像回显的跨域问题_第1张图片

2.配置oss存放图片的bucket跨域规则,可设*,视为不作限制

RuoYi-Vue——裁剪区域头像回显的跨域问题_第2张图片

3.将图片转为base64格式展现

 

// 设置头像base64
setAvatarBase64(src, callback) {
  let _this = this;
  let image = new Image();
  // 处理缓存
  image.src = src + '?v=' + Math.random();
  // 支持跨域图片
  image.crossOrigin = "*";
  image.onload = function () {
    let base64 = _this.transBase64FromImage(image);
    callback && callback(base64);
  }
},
// 将网络图片转换成base64格式
transBase64FromImage(image) {
  let canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  let ctx = canvas.getContext("2d");
  ctx.drawImage(image, 0, 0, image.width, image.height);
  // 可选其余值 image/jpeg
  return canvas.toDataURL("image/png");
}

 这样就可以正常显示啦,当然眼尖小伙伴会注意到 _this = this 这一步,或许有的小伙伴会疑惑,为什么不直接使用this?其实this的指向是会改变,当在image.onload = function (){}里面this便指向了image,于是我们提前把this赋给_this指向Vue实例,才能调用transBase64FromImage方法。

推荐参考:

vue-cropper组件跨域解决

this作用域

this指向

你可能感兴趣的:(RuoYi-Vue,vue.js,前端,javascript)