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

最新推荐文章于 2025-09-12 12:24:20 发布

原创最新推荐文章于 2025-09-12 12:24:20 发布 · 6.1k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #后端 #javascript

本文介绍了前端如何处理从后端获取的图片URL，直接在img标签中展示，以及如何将图片转换为base64数据上传给后端。同时详细阐述了在上传图片时对格式、大小的限制方法，确保图片符合100KB、100*100像素且仅支持JPG/PNG格式的要求。此外，还提到了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内核的实现（一般手机上就是使用这个），还有火狐等浏览器的实现