项目中需要上传图片可谓是经常遇到的需求, 本文将介绍 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 方式也使得, 在前端进行图片编辑成为了可能, 不需要上传到服务器就能预览. 主要收获还是对于异步操作的处理.
最后
为了帮助大家让学习变得轻松, 高效, 给大家免费分享一大批资料, 帮助大家在成为全栈工程师, 乃至架构师的路上披荆斩棘. 在这里给大家推荐一个前端全栈学习交流圈: 866109386. 欢迎大家进群交流讨论, 学习交流, 共同进步.
当真正开始学习的时候难免不知道从哪入手, 导致效率低下影响继续学习的信心.
但最重要的是不知道哪些技术需要重点掌握, 学习时频繁踩坑, 最终浪费大量时间, 所以有有效资源还是很有必要的.
最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们, 祝福大家在往后的工作与面试中一切顺利.
来源: http://www.jianshu.com/p/27cee36e23b1