记录生活中的点滴，分享、学习、创新
项目中需要上传图片可谓是经常遇到的需求，本文将介绍 3 种不同的图片上传方式，在这总结分享一下，有什么建议或者意见，请大家踊跃提出来。
没有业务场景的功能都是耍流氓，那么我们先来模拟一个需要实现的业务场景。假设我们要做一个后台系统添加商品的页面，有一些商品名称、信息等字段，还有需要上传商品轮播图的需求。
我们就以Vue、Element-ui，封装组件为例子聊聊如何实现这个功能。其他框架或者不用框架实现的思路都差不多，本文主要聊聊实现思路。
1.云储存
常见的 七牛云，OSS（阿里云）等，这些云平台提供API接口，调用相应的接口，文件上传后会返回图片存储在服务器上的路径，前端获得这个路径保存下来提交给后端即可。此流程处理相对简单。
主要步骤
代码范例
我们以阿里的 OSS 服务来实现，们试着来封装一个OSS的图片上传组件。
通过element-ui的upLoad组件的 http-request 参数来自定义我们的文件上传，仅仅使用他组件的样式，和其他上传前的相关钩子（控制图片大小，上传数量限制等）。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <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 的方式进行文件上传。具体的思路和云文件服务器差不多。
主要步骤
代码示例
此种图片上传根据element-ui的upLoad组件只要传入后端约定的相关字段即可实现，若使用元素js也是生成formdata对象，通过Ajax去实现上传也是类似的。
这里只做一个简单的示例，具体请看el-upload组件相文档就能实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <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也可，我是在提交整个表单钱一次进行转码加工。
具体步骤
在这里要注意一下，因为 readAsDataURL 操作是异步的，我们如何将存在数组中的若干的 file对象，进行编码，并且按照上传的顺序，把编码后端图片base64字符串储存在一个新数组内呢，首先想到的是promise的链式调用，可是不能并发进行转码，有点浪费时间。我们可以通过循环 async 函数进行并发，并且排列顺序。请看 methods 的 sub