目录

后端向前端返回图片URL,并向后端传递base64格式URL

JAY.LIN 收录于后端

2024-03-15 约 720 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=123048151

目录

后端向前端返回图片URL，并向后端传递base64格式URL

1.当后端将请求图片的url传给前端，前端无需处理直接放置于img标签即可。

<img class="popover-image" :src="getImgList(image)"/>
// 此处需要对图片url进行处理
getImgList(url) {
  return getImg(url)
},

export function getImg(url) {
  return `${process.env.VUE_APP_BASE_API}${url}`
}

2.当需要向后端传递 base64 的数据，处理如下

// 此处为上传方法
this,formData.icon // 表单字段：传图片base64
getBase64(image){
  var base64 = ''
  var img = new Image()
  
  // 图片预加载：把图片加载到本地，之后就直接到缓存那里拿图片
  img.onload = () => {
    base64 = this.image2Base64(img)
   this.formData.icon
  }
}

image2Base64(img) {
  var canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  var ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, img.width, img.height)
  var dataURL = canvas.toDataURL('image/png') // 转换为base64编码后图片的格式
  return dataURL
}

3.当上传图片时，需要对图片的格式、大小等进行限制，处理如下。

// 此处以100KB、100*100、image/jpg为例
beforeUpload(file){
  const _this = this
  const isImg = ['image/jpg', 'image/png', 'image/jpeg'].indexOf(file.type) > -1
  const is100KB = file.size / 1024 < 100 // 限制小于100KB
  if(!is100KB){
    this.$message.error({ center: true, message: `图片大小不能超过100KB` })
    return false
  } else if(isImg){
    this.$message.error({ center: true, message: '图片格式只支持JPG/PNG' })
    return false
  } else {
      const isSize = new Promise((resolve,reject)=>{
          const _url = window.URL || window.webkitURL
          const img = new image()
          img.src = _url.createObjectURL(file)
          img.load = function(){
              const valid = img.width === 100 && img.height === 100
              valid ? resolve() : reject()
          }
      }).then(()=>{
          return file
      },()=>{
          _this.$message.error({ center: true, message: `图片尺寸只支持100*100` })
          return Promise.reject()
      })
      return isSize
  }
}

// URL对象是硬盘（SD卡等）指向文件的一个路径，如果我们做文件上传的时候，想在没有上传服务器端的情况下看到上传图片的效果图的时候就可是以通过var url=window.URL.createObjectURL(obj.files[0]);获得一个http格式的url路径，这个时候就可以设置到<img>中显示了。
window.webkitURL和window.URL是一样的，window.URL标准定义，window.webkitURL是webkit内核的实现（一般手机上就是使用这个），还有火狐等浏览器的实现