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

程序员文章站 2022-07-03 21:52:52

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

项目中需要上传图片可谓是经常遇到的需求，本文将介绍 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上传就完成了。可是轮播图有可以进行编辑，我们该如何处理呢？一般来说商品增加页面和修改页面可以公用一个组件，那么我们继续在这个页面上修改。

编辑时我们首先会拉取商品原有数据，进行展示，在进行修改，这时候服务器返回的图片是一个路径这样，当我们新增一张图片的还是和上面的方法一样转码即可。可是后端说，没有修改的图片也要赚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实现图片上传的三种方式，希望对大家有所帮助

上一篇：孟晚舟与美国达成协议获释

下一篇：安卓-BottomSheetDialogFragment高度设置

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

JS实现上传图片的三种方法并实现预览图片功能

vue中实现图片和文件上传的示例代码

vue.js 图片上传并预览及图片更换功能的实现代码

yii使用activeFileField控件实现上传文件与图片的方法

PHP使用curl请求实现post方式上传图片文件功能示例

Linux echo命令的使用及三种实现方式

Vue+UpLoad实现上传预览和删除图片的实践

vue+element-ui实现表格编辑的三种实现方式

Vue+UpLoad实现上传预览和删除图片的实践

土旦：移动端 Vue+Vant 的Uploader 实现：上传、压缩、旋转图片

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

JS实现上传图片的三种方法并实现预览图片功能

vue中实现图片和文件上传的示例代码

vue.js 图片上传并预览及图片更换功能的实现代码

yii使用activeFileField控件实现上传文件与图片的方法

PHP使用curl请求实现post方式上传图片文件功能示例

Linux echo命令的使用及三种实现方式

Vue+UpLoad实现上传预览和删除图片的实践

vue+element-ui实现表格编辑的三种实现方式

Vue+UpLoad实现上传预览和删除图片的实践

土旦：移动端 Vue+Vant 的Uploader 实现 ：上传、压缩、旋转图片

土旦：移动端 Vue+Vant 的Uploader 实现：上传、压缩、旋转图片