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

本文介绍了前端如何处理从后端获取的图片URL,直接在img标签中展示,以及如何将图片转换为base64数据上传给后端。同时详细阐述了在上传图片时对格式、大小的限制方法,确保图片符合100KB、100*100像素且仅支持JPG/PNG格式的要求。此外,还提到了URL对象在预览图片中的作用。
摘要由CSDN通过智能技术生成

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内核的实现(一般手机上就是使用这个),还有火狐等浏览器的实现
  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值