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

项目中需要上传图片可谓是经常遇到的需求,本文将介绍 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></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对象

最后提交整个商品表单之前进行编码处理

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/f3960a2671ebb6fc85ea36c45cac2bf6.html