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


Posted in Javascript onJuly 17, 2018

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

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

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

1.云储存

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

主要步骤

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

代码范例

我们以阿里的 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 的方式进行文件上传。具体的思路和云文件服务器差不多。

主要步骤

  1. 设置服务器上传路径、上传文件字段名、header、data参数等
  2. 上传成功后,返回服务器存储的路径
  3. 返回的图片路径存储到表单提交对象中

代码示例

此种图片上传根据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也可,我是在提交整个表单钱一次进行转码加工。

具体步骤

  1. 新建文件封装 异步 转base64的方法
  2. 添加商品的时候选择本地文件,选中用对象保存整个file对象
  3. 最后提交整个商品表单之前进行编码处理

在这里要注意一下,因为 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实现图片上传的三种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 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
You might like
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
用Socket发送电子邮件
2006/10/09 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
php生成二维码
2015/08/10 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
express启用https使用小记
2019/05/21 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
早餐连锁店计划书
2014/01/08 职场文书
仓库文员岗位职责
2014/04/06 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
创业计划书之便利店
2019/09/05 职场文书
python多线程方法详解
2022/01/18 Python
你需要掌握的20个Python常用技巧
2022/02/28 Python