编程 Javascript

使用Vue实现图片上传的三种方式

Posted in Javascript onJuly 17, 2018

项目中需要上传图片可谓是经常遇到的需求，本文将介绍 3 种不同的图片上传方式，在这总结分享一下，有什么建议或者意见，请大家踊跃提出来。

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

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

1.云储存

常见的七牛云，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 (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实现图片上传的三种方式

- Author -

huangjincq

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

初探jquery——表单应用范例

Feb 20 Javascript

ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList

Feb 03 Javascript

JS下拉缓冲菜单示例代码

Aug 30 Javascript

探析浏览器执行JavaScript脚本加载与代码执行顺序

Jan 12 Javascript

使用PBFunc在Powerbuilder中支付宝当面付款功能

Oct 01 Javascript

JS实现的简单下拉框联动功能示例

May 11 Javascript

微信小程序实现人脸识别

May 25 Javascript

基于Vue实现微信小程序的图文编辑器

Jul 25 Javascript

JavaScript函数节流和函数去抖知识点学习

Jul 31 Javascript

基于Vue+ElementUI的省市区地址选择通用组件

Nov 20 Javascript

微信小程序自定义胶囊样式

Dec 27 Javascript

JS实现扫雷项目总结

May 19 Javascript

vue的token刷新处理的方法

Jul 17 #Javascript

vue 权限认证token的实现方法

Jul 17 #Javascript

vue 实现axios拦截、页面跳转和token 验证

Jul 17 #Javascript

详解webpack import()动态加载模块踩坑

Jul 17 #Javascript

vue-router中的hash和history两种模式的区别

Jul 17 #Javascript

JS使用tween.js动画库实现轮播图并且有切换功能

Jul 17 #Javascript

SVG实现时钟效果

Jul 17 #Javascript