使用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 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
JQuery 常用操作代码
Mar 14 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 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
PHP下10件你也许并不了解的事情
2008/09/11 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
js 页面输出值
2008/11/30 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
大众服装店创业计划书范文
2014/01/01 职场文书
中学生运动会入场词
2014/02/12 职场文书
学习十八大报告感言
2014/02/28 职场文书
婚前财产公证书
2014/04/10 职场文书
自主招生学校推荐信
2014/09/26 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python