使用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 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 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
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
js的with语句使用方法
2007/09/21 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python格式化日期时间操作示例
2018/06/28 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
建筑设计师岗位职责
2013/11/18 职场文书
经济与贸易专业应届生求职信
2013/11/19 职场文书
物业管理员岗位职责范文
2013/11/25 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
护理见习报告范文
2014/11/03 职场文书
数学教师个人总结
2015/02/06 职场文书
大学军训口号大全
2015/12/24 职场文书