vue获取上传图片的名字和路径_使用Vue实现图片上传的三种方式
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来。
没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景。假设我们要做一个后台系统添加商品的页面,有一些商品名称、信息等字段,还有需要上传商品轮播图的需求。
我们就以Vue、Element-ui,封装组件为例子聊聊如何实现这个功能。其他框架或者不用框架实现的思路都差不多,本文主要聊聊实现思路。
1.云储存
常见的 七牛云,OSS(阿里云)等,这些云平台提供API接口,调用相应的接口,文件上传后会返回图片存储在服务器上的路径,前端获得这个路径保存下来提交给后端即可。此流程处理相对简单。
主要步骤
向后端发送请求,获取OSS配置数据
文件上传,调用OSS提供接口
文件上传完成,后的文件存储在服务器上的路径
将返回的路径存值到表单对象中
代码范例
我们以阿里的 OSS 服务来实现,们试着来封装一个OSS的图片上传组件。
通过element-ui的upLoad组件的 http-request 参数来自定义我们的文件上传,仅仅使用他组件的样式,和其他上传前的相关钩子(控制图片大小,上传数量限制等)。
list-type="picture-card"
action="''"
:http-request="upload"
:before-upload="beforeAvatarUpload">
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)
})
}
}
}
传统文件服务器上传图片
此方法就是上传到自己文件服务器硬盘上,或者云主机的硬盘上,都是通过 formdata 的方式进行文件上传。具体的思路和云文件服务器差不多。
主要步骤
设置服务器上传路径、上传文件字段名、header、data参数等
上传成功后,返回服务器存储的路径
返回的图片路径存储到表单提交对象中
代码示例
此种图片上传根据element-ui的upLoad组件只要传入后端约定的相关字段即可实现,若使用元素js也是生成formdata对象,通过Ajax去实现上传也是类似的。
这里只做一个简单的示例,具体请看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>
上传图片
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) // 这里可以获得上传成功的相关信息
}
}
}
图片转 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
})
}
添加商品页面 部分代码
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="">
submitData
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('添加商品成功')
// 一般提交成功后后端会处理,在需要展示商品地方会返回一个图片路径
}
},
}
}
这样本地图片上传的时候转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
})
}
添加商品页面 部分代码
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="">
submitData
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('编辑成功')
}
}
}
}
}
结语
至此常用的三种图片上传方式就介绍完了,转base64方式一般在小型项目中使用,大文件上传还是传统的 formdata或者 云服务,更合适。但是 通过转base64方式也使得,在前端进行图片编辑成为了可能,不需要上传到服务器就能预览。主要收获还是对于异步操作的处理。
总结
以上所述是小编给大家介绍的使用Vue实现图片上传的三种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
vue获取上传图片的名字和路径_使用Vue实现图片上传的三种方式相关推荐
- vue获取上传图片的名字和路径_vue.js,_vue 上传图片路径不对,vue.js - phpStudy
vue 上传图片路径不对 在网上找了个图片上传的示例,然后拉到vue2.0的项目中图片加载不出来,src=0,这是为什么 选择图片 添加图片 移除全部图片 上传 import { Cell } fro ...
- Vue路由传参三种方式
Vue路由传参三种方式 params传参 路由属性配置传参 query传参 一.params传参 this.$router.push({ name:"admin", //这里的pa ...
- php上传图片限制类型,php,_使用php的图片上传类进行图片上传,总是提示:上传文件时出错 : 未允许类型 。都是默认的配置,php - phpStudy...
使用php的图片上传类进行图片上传,总是提示:上传文件时出错 : 未允许类型 .都是默认的配置 使用php的图片上传类进行图片上传,总是提示:上传文件时出错 : 未允许类型 .都是默认的配置 $upl ...
- java 微信图片上传_微信小程序图片上传java端以及前端实现
小程序的图片上传与传统的图片上传方式有一些不一样 如果你有幸看到这篇文章,恭喜你,你可以完美解决了. 话不多说,前后端代码一并奉上: (基于springmvc ) @Controller @Reque ...
- vue拖动添加模块展示_vue-quill-editor的增强模块,提供图片上传,复制插入,拖拽插入...
sorry everyone, 由于作者自身原因,没有精力和时间处理issues,该插件已经不做维护了,希望大家见谅. quill-image-extend-module vue-quill-edit ...
- ueditor 上传路径 Php_v9切换ueditor后图片上传路径问题 改成绝对路径
使用V9切换成ueditor编辑器后,图片上传路径显示的是相对路径,同时会把content字段第一张图这个路径同步到缩略图的thumb字段.thumb字段如果是相对路径的话,前端就不能进行裁剪,APP ...
- 上传文件java后台获取为空_java图片上传,通过MultipartFile方式,如果后台获取null检查是否缺少步骤...
本方法基于springMvc 1.首先需要在webap下创建images 2.在springmvc.xml上引入 3.配置web.xml过滤器 4.后台代码 import org.springfram ...
- cupload怎么保存图片_原生js的图片上传插件cupload
插件描述:支持图片预览.像素限制.大小限制.多图上传.更新模式下页面初始化加载图片 更新时间:2020-09-25 00:23:49 更新说明:添加 删除时,同时删除服务器图片的功能,文档提供php ...
- spring循环依赖及解决方式_来探究一下Spring 循环依赖的三种方式
引言:循环依赖就是N个类中循环嵌套引用,如果在日常开发中我们用new 对象的方式发生这种循环依赖的话程序会在运行时一直循环调用,直至内存溢出报错.下面说一下Spring是如果解决循环依赖的. 第一种: ...
最新文章
- docker安装redis提示没有日记写入权限_Docker 学习笔记(第六集:使用 Dockerfile 定制镜像)...
- python json数据的转换
- Python统计网站访问日志log中的IP信息,并排序。。
- ActiveMQ整合spring
- matlab测量液体液位,基于MATLAB三容水箱液位控制系统.doc
- php加数据库开发案例,PHP简单数据库操作类实例【支持增删改查及链式操作】
- 阿凡达时隔十年重映,王者归来还是炒冷饭?Python爬取上千条评论并分析
- Django Rest Framework 部分源码剖析
- Microsoft JDBC Driver 4.0 for SQL Server
- Class文件 反编译成 Java文件
- oracle学习篇十二:索引
- 如何使用cmd进入打印机选项_命令行方式添加打印机
- Failure obtaining db row lock: Lock wait timeout exceeded; try restarting transaction java定时任务
- Ecowalker充气足球门,为青少年足球训练保驾护航!
- 大数据时代,IT行业的热门岗位有哪些?9大前景分析!
- Mysql 多表连接查询
- 根据经度纬度计算两者之间的距离
- 实现Windows XP自动登录的两种方法
- 3d点云与cad模型
- SQL语法范例大全pdf