Vue图片上传实战：云存储、传统服务器与Base64编码详解

在Web开发中，图片上传是常见的需求。本文将总结并分享三种不同的图片上传实现方案，欢迎提出建议或意见。

功能设计需基于实际业务场景。假设我们正在开发一个后台管理系统中的商品添加页面，该页面包含商品名称、简介等字段，同时需要支持上传商品轮播图。

本文以Vue框架结合Element UI组件库为例，封装图片上传组件来阐述实现思路。其他前端框架或原生JavaScript的实现逻辑大致相同，本文重点在于梳理核心实现思路。

云存储方案（OSS）

1. 云存储方案

常见的七牛云、阿里云OSS等云服务平台均提供API接口。前端调用相应接口上传文件后，服务器会返回图片在云端的存储路径，前端获取该路径并保存提交给后端即可。此流程处理相对简单。

主要步骤

向后端发送请求，获取OSS配置数据（如AccessKey等）。
文件上传，调用OSS提供的接口进行文件传输。
文件上传完成后，获取存储在服务器上的文件路径。
将返回的文件路径存入表单对象中，以便后续提交。

代码范例

我们以阿里云OSS服务为例，尝试封装一个专门用于图片上传的OSS组件。

利用Element UI中el-upload组件的http-request参数来自定义文件上传逻辑。我们仅使用该组件提供的样式及上传前的相关钩子（如控制图片大小、限制上传数量等）。


<template>
 <el-upload
  list-type="picture-card"
  action="''"
  :http-request="upload"
  :before-upload="beforeAvatarUpload">
  <i class="el-icon-plus"></i>
 </el-upload>
</template>

<script>
 import {getAliOSSCreds} from '@/api/common' // 向后端获取 OSS秘钥信息
 import {createId} from '@/utils' // 一个生产唯一的id的方法
 import OSS from 'ali-oss'

 export default {
  name: 'imgUpload',
  data () {
   return {}
  },
  methods: {
   // 图片上传前验证
   beforeAvatarUpload (file) {
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isLt2M) {
     this.$message.error('上传头像图片大小不能超过 2MB!')
    }
    return isLt2M
   },
   // 上传图片到OSS 同时派发一个事件给父组件监听
   upload (item) {
    getAliOSSCreds().then(res => { // 向后台发请求 拉取OSS相关配置
     let creds = res.body.data
     let client = new OSS.Wrapper({
      region: 'oss-cn-beijing', // 服务器集群地区
      accessKeyId: creds.accessKeyId, // OSS帐号
      accessKeySecret: creds.accessKeySecret, // OSS 密码
      stsToken: creds.securityToken, // 签名token
      bucket: 'imgXXXX' // 阿里云上存储的 Bucket
     })
     let key = 'resource/' + localStorage.userId + '/images/' + createId() + '.jpg' // 存储路径，并且给图片改成唯一名字
     return client.put(key, item.file) // OSS上传
    }).then(res => {
     console.log(res.url)
     this.$emit('on-success', res.url) // 返回图片的存储路径
    }).catch(err => {
     console.log(err)
    })
   }
  }
 }
</script>

传统文件服务器上传

传统文件服务器上传图片

此方法是将文件上传至自有文件服务器硬盘或云主机硬盘，均通过FormData对象进行文件传输。具体思路与云文件服务器类似。

主要步骤

设置服务器上传路径、上传文件字段名、请求头（header）及data参数等。
上传成功后，服务器返回存储路径。
将返回的图片路径存储到表单提交对象中。

代码示例

此种图片上传方式基于Element UI的el-upload组件，只需传入后端约定的相关字段即可实现。若使用原生JavaScript，也是生成FormData对象并通过Ajax实现上传，原理类似。

此处仅展示简单示例，具体实现可参考el-upload组件的相关文档。


<template>
 <el-upload
  ref="imgUpload"
  :on-success="imgSuccess"
  :on-remove="imgRemove"
  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
  :headers="headerMsg"
  :action="upLoadUrl"
  multiple>
  <el-button type="primary">上传图片</el-button>
 </el-upload>
</template>

<script>
 import {getAliOSSCreds} from '@/api/common' // 向后端获取 OSS秘钥信息
 import {createId} from '@/utils' // 一个生产唯一的id的方法
 import OSS from 'ali-oss'

 export default {
  name: 'imgUpload',
  data () {
   return {
     headerMsg:{Token:'XXXXXX'},
     upLoadUrl:'xxxxxxxxxx'
   }
  },
  methods: {
   // 上传图片成功
   imgSuccess (res, file, fileList) {
    console.log(res)
    console.log(file)
    console.log(fileList)  // 这里可以获得上传成功的相关信息
   }
  }
 }
</script>

图片转Base64上传

图片转Base64后上传

在某些私活项目或仅需上传小图片的场景下，可能会采用前端将图片转换为Base64字符串后上传的方式。例如，商品轮播图有多张，将其转换为Base64编码后，去掉前缀（data:image/jpeg;base64,），以逗号分隔拼接字符串传给后端。我们来看看如何实现这一需求。

1. 本地文件如何转成Base64

利用HTML5新特性readAsDataURL可将文件转换为Base64格式。对于多张轮播图，可以在选中后即时转换，也可以在提交整个表单前统一进行转码加工。

具体步骤

新建文件封装异步转换Base64的方法。
在添加商品时选择本地文件，选中后用对象保存整个File对象。
最后提交整个商品表单之前进行编码处理。

这里需要注意，由于readAsDataURL操作是异步的，我们需要处理数组中多个File对象的编码顺序，并确保按上传顺序将编码后的图片Base64字符串存储在新数组中。首先想到的是Promise的链式调用，但这无法并发执行，耗时较长。我们可以通过循环async函数实现并发处理并保证顺序。请参考methods中的submitData方法。

utils.js


export function uploadImgToBase64 (file) {
 return new Promise((resolve, reject) => {
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = function () { // 图片转base64完成后返回reader对象
   resolve(reader)
  }
  reader.onerror = reject
 })
}

添加商品页面部分代码


<template>
 <div>
   <el-upload
    ref="imgBroadcastUpload"
    :auto-upload="false" multiple
    :file-list="diaLogForm.imgBroadcastList"
    list-type="picture-card"
    :on-change="imgBroadcastChange"
    :on-remove="imgBroadcastRemove"
    accept="image/jpg,image/png,image/jpeg"
    action="">
    <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
   </el-upload>
   <el-button>submitData</el-button> 
 </div>
</template>

<script>
 import { uploadImgToBase64 } from '@/utils' // 导入本地图片转base64的方法

 export default {
  name: 'imgUpload',
  data () {
   return {
    diaLogForm: {
      goodsName:'', // 商品名称字段
      imgBroadcastList:[], // 储存选中的图片列表
      imgsStr:''   // 后端需要的多张图base64字符串 , 分割
    }
   }
  },
  methods: {
   // 图片选择后 保存在 diaLogForm.imgBroadcastList 对象中
   imgBroadcastChange (file, fileList) {
    const isLt2M = file.size / 1024 / 1024 < 2 // 上传头像图片大小不能超过 2MB
    if (!isLt2M) {
     this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid)
     this.$message.error('图片选择失败，每张图片大小不能超过 2MB,请重新选择!')
    } else {
     this.diaLogForm.imgBroadcastList.push(file)
    }
   },
   // 有图片移除后 触发
   imgBroadcastRemove (file, fileList) {
    this.diaLogForm.imgBroadcastList = fileList
   },
   // 提交弹窗数据
   async submitDialogData () {
    const imgBroadcastListBase64 = []
    console.log('图片转base64开始...')
    // 并发 转码轮播图片list => base64
    const filePromises = this.diaLogForm.imgBroadcastList.map(async file => {
     const response = await uploadImgToBase64(file.raw)
     return response.result.replace(/.*;base64,/, '') // 去掉data:image/jpeg;base64,
    })
    // 按次序输出 base64图片
    for (const textPromise of filePromises) {
     imgBroadcastListBase64.push(await textPromise)
    }
    console.log('图片转base64结束..., ', imgBroadcastListBase64)
    this.diaLogForm.imgsStr = imgBroadcastListBase64.join()
    console.log(this.diaLogForm)
    const res = await addCommodity(this.diaLogForm)       // 发请求提交表单
    if (res.status) {
     this.$message.success('添加商品成功')
     // 一般提交成功后后端会处理，在需要展示商品地方会返回一个图片路径 
    }
   },
  }
 }
</script>

这样，本地图片上传时转换为Base64上传的功能即告完成。然而，轮播图可能涉及编辑功能，我们该如何处理？通常商品增加页面和修改页面可以共用一个组件，因此我们继续在该页面进行修改。

编辑时，我们首先拉取商品原有数据进行展示，然后进行修改。此时服务器返回的图片是一个路径（如http://xxx.xxx.xxx/abc.jpg）。当我们新增一张图片时，仍按上述方法转码即可。但若后端要求未修改的图片也需转换为Base64，则需处理在线链接图片的转换问题。

2. 在线图片转Base64

具体步骤

在utils.js文件中添加利用Canvas将在线图片转换为Base64的方法。

编辑商品时，先拉取原来的商品信息展示到页面。

提交表单之前，区分在线图片还是本地图片进行转码。

utils.js


export function uploadImgToBase64 (file) {
 return new Promise((resolve, reject) => {
  function getBase64Image (img) {
   const canvas = document.createElement('canvas')
   canvas.width = img.width
   canvas.height = img.height
   const ctx = canvas.getContext('2d')
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
   var dataURL = canvas.toDataURL()
   return dataURL
  }

  const image = new Image()
  image.crossOrigin = '*' // 允许跨域图片
  image.src = img + '?v=' + Math.random() // 清除图片缓存
  console.log(img)
  image.onload = function () {
   resolve(getBase64Image(image))
  }
  image.onerror = reject
 })
}

添加商品页面部分代码


<template>
 <div>
   <el-upload
    ref="imgBroadcastUpload"
    :auto-upload="false" multiple
    :file-list="diaLogForm.imgBroadcastList"
    list-type="picture-card"
    :on-change="imgBroadcastChange"
    :on-remove="imgBroadcastRemove"
    accept="image/jpg,image/png,image/jpeg"
    action="">
    <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
   </el-upload>
   <el-button>submitData</el-button> 
 </div>
</template>

<script>
  import { uploadImgToBase64, URLImgToBase64 } from '@/utils'
  
 export default {
  name: 'imgUpload',
  data () {
   return {
    diaLogForm: {
      goodsName:'', // 商品名称字段
      imgBroadcastList:[], // 储存选中的图片列表
      imgsStr:''   // 后端需要的多张图base64字符串 , 分割
    }
   }
  },
  created(){
    this.getGoodsData()
  },
  methods: {
   // 图片选择后 保存在 diaLogForm.imgBroadcastList 对象中
   imgBroadcastChange (file, fileList) {
    const isLt2M = file.size / 1024 / 1024 < 2 // 上传头像图片大小不能超过 2MB
    if (!isLt2M) {
     this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid)
     this.$message.error('图片选择失败，每张图片大小不能超过 2MB,请重新选择!')
    } else {
     this.diaLogForm.imgBroadcastList.push(file)
    }
   },
   // 有图片移除后 触发
   imgBroadcastRemove (file, fileList) {
    this.diaLogForm.imgBroadcastList = fileList
   },
   // 获取商品原有信息
   getGoodsData () {
    getCommodityById({ cid: this.diaLogForm.id }).then(res => {
     if (res.status) {
      Object.assign(this.diaLogForm, res.data)
      // 把 '1.jpg,2.jpg,3.jpg' 转成[{url:'http://xxx.xxx.xx/j.jpg',...}] 这种格式在upload组件内展示。 imgBroadcastList 展示原有的图片
      this.diaLogForm.imgBroadcastList = this.diaLogForm.imgsStr.split(',').map(v => ({ url: this.BASE_URL + '/' + v })) 
     }
    }).catch(err => {
     console.log(err.data)
    })
   },
   // 提交弹窗数据
   async submitDialogData () {
    const imgBroadcastListBase64 = []
    console.log('图片转base64开始...')
    this.dialogFormLoading = true
    // 并发 转码轮播图片list => base64
    const filePromises = this.diaLogForm.imgBroadcastList.map(async file => {
     if (file.raw) { // 如果是本地文件
      const response = await uploadImgToBase64(file.raw)
      return response.result.replace(/.*;base64,/, '')
     } else { // 如果是在线文件
      const response = await URLImgToBase64(file.url)
      return response.replace(/.*;base64,/, '')
     }
    })
    // 按次序输出 base64图片
    for (const textPromise of filePromises) {
     imgBroadcastListBase64.push(await textPromise)
    }
    console.log('图片转base64结束...')
    this.diaLogForm.imgs = imgBroadcastListBase64.join()
    console.log(this.diaLogForm)
    if (!this.isEdit) { // 新增编辑 公用一个组件。区分接口调用
     const res = await addCommodity(this.diaLogForm)       // 提交表单
     if (res.status) {
      this.$message.success('添加成功')
     }
    } else {
     const res = await modifyCommodity(this.diaLogForm)      // 提交表单
     if (res.status) {
      this.$router.push('/goods/goods-list')
      this.$message.success('编辑成功')
     }
    }
   }
  }
 }
</script>

结语

至此，常用的三种图片上传方式已介绍完毕。Base64方式一般适用于小型项目，而大文件上传则更适合传统的FormData或云服务方案。不过，通过Base64方式使得在前端进行图片编辑成为可能，无需上传到服务器即可预览。主要收获在于对异步操作的处理技巧。

总结

以上所述是使用Vue实现图片上传的三种方式，希望对大家有所帮助。如果大家有任何疑问请留言，小编会及时回复。感谢大家对本站的支持！

Vue实现图片上传的三种方案：OSS、Formdata与Base64

云存储方案（OSS）

传统文件服务器上传

图片转Base64上传

实用工具推荐