使⽤Vue实现图⽚上传的三种⽅式
项⽬中需要上传图⽚可谓是经常遇到的需求，本⽂将介绍 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.$('上传头像图⽚⼤⼩不能超过 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()
resolve(reader)
}
})
}
添加商品页⾯部分代码
<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.$('图⽚选择失败，每张图⽚⼤⼩不能超过 2MB，请重新选择!')
} else {
this.diaLogForm.imgBroadcastList.push(file)
}
},
/
/ 有图⽚移除后触发
imgBroadcastRemove (file, fileList) {
this.diaLogForm.imgBroadcastList = fileList
},
// 提交弹窗数据
async submitDialogData () {
const imgBroadcastListBase64 = []
console.log('图⽚转base64开始...')
svg图片怎么使用// 并发转码轮播图⽚list => base64
const filePromises = this.diaLogForm.imgBroadcastList.map(async file => {
const response = await uploadImgToBase64(file.raw)
place(/.*;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上传就完成了。可是轮播图有可以进⾏编辑，我们该如何处理呢？⼀般来说商品增加页⾯和修改页⾯可以公⽤⼀个组件，那么我们继续在这个页⾯上修改。
2. 在线图⽚转base64
具体步骤
utils.js ⽂件添加在线图⽚转base64的⽅法，利⽤canvas
编辑商品，先拉取原来的商品信息展⽰到页⾯
提交表单之前，区分在线图⽚还是本地图⽚进⾏转码
utils.js
export function uploadImgToBase64 (file) {
return new Promise((resolve, reject) => {
function getBase64Image (img) {
const canvas = ateElement('canvas')
canvas.width = img.width
canvas.height = img.height
const ctx = Context('2d')
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
var dataURL = DataURL()
return dataURL
}
const image = new Image()
image.src = img + '?v=' + Math.random() // 清除图⽚缓存
console.log(img)
resolve(getBase64Image(image))
}
})
}
添加商品页⾯部分代码
<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(){
},
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.$('图⽚选择失败，每张图⽚⼤⼩不能超过 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:'/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)
place(/.*;base64,/, '')
} else { // 如果是在线⽂件
const response = await URLImgToBase64(file.url)
place(/.*;base64,/, '')
}
})
// 按次序输出 base64图⽚
for (const textPromise of filePromises) {
imgBroadcastListBase64.push(await textPromise)
}
console.log('图⽚转base64结束...')
this.diaLogForm.imgs = imgBroadcastListBase64.join()
console.log(this.diaLogForm)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。