项目中需要上传图片可谓是经常遇到的需求，本文将介绍 4 种不同的图片上传方式，在这总结记录一下。

没有业务场景的功能都是耍流氓，那么我们先来模拟一个需要实现的业务场景。假设我们要做一个后台系统添加商品的页面，有一些商品名称、信息等字段，还有需要上传商品轮播图的需求。

我们就以Vue、Element-ui，封装组件为例子聊聊如何实现这个功能。其他框架或者不用框架实现的思路都差不多，本文主要聊聊实现思路。

云储存

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

主要步骤

向后端发送请求，获取OSS配置数据
文件上传，调用OSS提供接口
文件上传完成，后的文件存储在服务器上的路径
将返回的路径存值到表单对象中

代码范例

我们以阿里的 OSS 服务来实现，们试着来封装一个OSS的图片上传组件。

通过element-ui的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的upLoad组件只要传入后端约定的相关字段即可实现，若使用元素js也是生成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编码后去掉data:image/jpeg;base64,将字符串以逗号的形势拼接，传给后端。我们如何来实现呢。

1.本地文件如何转成 base64

我们通过H5新特性 readAsDataURL 可以将文件转base64格式，轮播图有多张，可以在点击后立马转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 文件添加在线图片转base64的方法，利用canvas
编辑商品，先拉取原来的商品信息展示到页面
提交表单之前，区分在线图片还是本地图片进行转码

utils.js

export function uploadImgToBase64 (img) {
  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()  // 清除图片缓存
    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>

图片切片上传

在做上图上传的时候，如果上传一整张图，可能导致用户加载背景图片太慢，我们可以考虑把图片切片后再进行上传。

操作流程如下：

监听 input 事件获取 file 对象
通过 new FileReader() 把 file转成base64`
通过 new Image() 本地加载 base64 图片
图片加载完成后，通过 naturalWidth naturalHeight 计算切割张数和每次切割的宽高
开始用 canvas 循环生成图片
- 循环中=>每次移动位置绘制图片
- canvas.toDataURL 图片转 base64
- base64 转 blob
- blob 转 file
- file 请求接口文件上传
- 保存上传后返回的 url
切片结束获取图片数组

代码

<template>
  <el-upload
    action="''"
    accept="jpg,jpeg,png,gif"
    :show-file-list="false"
    :auto-upload="false"
    :on-change="handleFileChange"
  >
    <el-button :loading="loading" size="mini" icon="el-icon-upload">上传图片 </el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
  </el-upload>
</template>

<script>
import Apis from '@/apis/common'

export default {
  data() {
    return {
      imgList: [],
      loading: false,
    }
  },
  methods: {
    async handleFileChange(file) {
      this.loading = true
      const fileObj = file.raw
      try {
        // file 转 base64
        const source = await this._fileToBase64(fileObj)
        // 加载 img 获取 img 对象
        const img = new Image()
        img.onload = async () => {
          // 图片加载完成后开始切割图片
          const imgList = await this._createPiece(img)
          this.imgList = imgList
          this.loading = false
        }
        img.src = source
      } catch (e) {
        this.loading = false
      }
    },
    /** 图片切割 上传 到服务器
     * @params img 对象
     * */
    async _createPiece(img) {
      const SPLIT_SIZE = 600 // 分割大小 600px
      const row = Math.ceil(img.naturalHeight / SPLIT_SIZE)

      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')

      let wpiece = Math.floor(img.naturalWidth)
      let hpiece = Math.floor(img.naturalHeight / row)
      let src = ''
      const imgList = []

      canvas.width = wpiece
      canvas.height = hpiece

      for (let i = 0; i < row; i++) {
        // 绘图
        ctx.drawImage(img, 0, i * hpiece, wpiece, hpiece, 0, 0, wpiece, hpiece)
        // canvas 转 base64
        src = canvas.toDataURL()
        // base64 转 blob
        const res = await fetch(src)
        const blob = await res.blob()
        // base 64转 file
        const file = new File([blob], 'File name', { type: 'image/png' })
        // file 上传到 文件服务器
        const uploadRes = await Apis.UPLOAD_IMAGE(file)
        // 返回 url 图片存储的 地址
        const url = uploadRes.data.url
        // 按切片顺序 保存url
        imgList.push(url)
      }
      return imgList
    },
    // 本地file 转base64
    _fileToBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = function (event) {
          let source = event.target.result
          resolve(source)
        }
        reader.onerror = reject
        reader.readAsDataURL(file)
      })
    },
  },
}
</script>

<style lang="scss">
.image-src {
  .el-form-item__content {
    position: static;
  }
}
</style>

结语

至此常用的四种图片上传方式就介绍完了，转base64方式一般在小型项目中使用，大文件上传还是传统的 formdata或者云服务，更合适。但是通过转base64方式也使得，在前端进行图片编辑成为了可能，不需要上传到服务器就能预览。主要收获还是对于异步操作的处理。欢迎大家提出更好的方式或建议。