vue 图片上传
功能说明:
1、调用手机拍照功能
2、调用相册功能
3、图片上传功能
4、图片预览功能
5、图片删除功能
关键点:
、input 新增multiple
、accept="image/*处理IOS、安卓手机启用摄像头
、根据createObjectURL处理图片预览
、formData构造函数创建空对象
、通过formData.getAll(),把文件流数据转为数组
组件示例图
组件代码 upload_img.vue
<template>
<div class="content">
<div class="imgBox">
<div class="uploadBox" v-for="(value, key) in imgs" :key="'uploadBox' + key">
<img :src="getObjectURL(value)" alt="" class="uploadImg">
<img src="../../assets/images/icon_x.png" alt="" class="closeImg" @click='delImg(key)'>
</div>
<div class="inputButton">
<img src="../../assets/images/icon_photo.png" alt="" class="addImg">
<input type="file" class="upload" @change="addImg" ref="inputer" multiple
accept="image/*"/>
</div>
<div class="submitTask" @click="submit">
上传图片
</div>
</div>
</div>
</template>
js:
export default ({
name: 'uploadPicture',
data: function() {
return {
formData: new FormData(),
imgs: {},
imgLen: ,
txtVal: ,
desc: '' }
},
created() { },
methods: {
descInput() {
// this.txtVal = this.desc.length;
},
addImg(event) {
let inputDOM = this.$refs.inputer
// 通过DOM取文件数据
this.fil = inputDOM.files
// console.log(inputDOM.files)
let oldLen = this.imgLen
for (let i = ; i < this.fil.length; i++) {
let size = Math.floor(this.fil[i].size / )
if (size > * * ) {
alert('请选择5M以内的图片!')
return false
}
this.imgLen++
this.$set(this.imgs, this.fil[i].name + '?' + new Date().getTime() + i, this.fil[i])
// console.log(this.imgs)
}
console.log('this.fil', this.fil)
// this.imgs = this.fil
},
getObjectURL(file) {
var url = null
if (window.createObjectURL !== undefined) { // basic
url = window.createObjectURL(file)
} else if (window.URL !== undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file)
} else if (window.webkitURL !== undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file)
}
return url
},
delImg(key) {
this.$delete(this.imgs, key)
this.imgLen--
},
// 提交上传图片
submit() {
for (let key in this.imgs) {
let name = key.split('?')[]
this.formData.append('file', this.imgs[key])
}
this.formData.getAll('file')
console.log('this.formData', this.formData)
this.$refund.upload(this.formData)
}
}
})
</script>
说明:
图片上传完成后,使用getObjectURL来作预览功能处理。
温馨提示:
formData.getAll最后返回来的是一个数组
样式:
<style lang="less">
// 外部盒子样式
.content {
width: %;
padding: .16rem !important;
.imgBox {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
} // 预览图片样式
.uploadBox {
position: relative;
width: %;
text-align: left;
margin-right: .1rem;
margin-bottom: .05rem;
// 预览样式
.uploadImg {
width: %;
height: %;
display: block;
overflow: hidden;
}
// 删除按钮
.closeImg {
width: .2rem;
height: .2rem;
position: absolute;
top: %;
right: %;
}
}
// 上图图片icon
.inputButton {
position: relative;
display: block;
width: .2rem;
height: .2rem;
// 上传图片样式
.addImg {
display: block;
width: .2rem;
height: .2rem;
}
// input样式
.upload {
width: .2rem;
height: .2rem;
opacity: ;
position: absolute;
top: ;
left: ;
z-index: ;
}
}
// 提交按钮
.submitTask {
margin: auto;
background: #EF504D;
width: %;
height: .3rem;
color: #fff;
font-size: .16rem;
line-height: .3rem;
text-align: center;
border-radius: .1rem;
margin-top: .8rem;
}
</style>
欢迎关注公众号,进一步技术交流:
vue 图片上传的更多相关文章
- vue图片上传组件
前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造轮子,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件.现将总结再次,希望有帮助. Layout <d ...
- vue 图片上传功能
这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix"> ...
- vue图片上传的简单组件
<template> <div class="rili" id="rili"> <div class="updel&qu ...
- 保姆级SpringBoot+Vue图片上传到阿里云OSS教程
小二是新来的实习生,作为技术 leader,我给他安排了一个非常简单的练手任务,把前端 markdown 编辑器里上传的图片保存到服务器端,结果他真的就把图片直接保存到了服务器上,这下可把我气坏了,就 ...
- vue图片上传
之前花了两个月用vue做了一个建筑照片我的webApp,前端就我一人,负责用vue写页面对接接口,后台一个程序员负责写接口,嵌套个安卓ios的壳.搞的是风风火火,过程也是很心累,大多不在技术,在于所谓 ...
- vue图片上传到七牛云
代码: <template> <div class="upload-info"> <div> <el-upload class=" ...
- vue图片上传及java存储图片(亲测可用)
1.前言 在使用elementui的upload组件时,我一直无法做到上传的图片和其他数据一起提交.单纯的上传文件,java的存储图片的方式也有局限性. 我知道的后端保存图片有两种方式:一种是直接存储 ...
- 后台管理系统之“图片上传” --vue
图片上传(基于vue) 相信上传图片是所有系统必备的功能吧,工作中的第一个管理系统就在上传图片的功能上卡顿了一整天. 当时用的elementUI组件,但是由于样式和设计图样式差别较大再加上原生相较好理 ...
- vue+axios实现移动端图片上传
在利用vue做一些H5页面时,或多或少会遇到有图片上传的操作,主要是运用html5里面的input[type=file]来实现,传递到后端的数据是以二进制的格式传递,所以上传图片的请求与普通的请求稍微 ...
随机推荐
- SQL logic error no such module: fts5 解决方案
因项目原因,需要使用SQLite的全文索引,用到了最新的fts5模块 但在咱们.net framwork中却会提示“SQL logic error no such module: fts5”:找不到f ...
- vue + element-ui 国际化实现
1. 安装组件和插件 cnpm i element-ui -S // 安装elementcnpm i vue-i18n -S //安装i18n 2.将国际化资源放在assets目录下 3.在src下新 ...
- iOS圆弧渐变进度条的实现
由于项目需要一个环形渐变进度条显示课程,这方便网上的确有很多相关资料但是,都是比较零散的而且,大多数只是放一堆代码就算完了.这里我想详细写一篇我自己实现这个进度条的过程. 实现一个圆弧进度条主要分为三 ...
- js 四 windows对象
1 window 对象 1 window对象的属性 window对象的属性,又都是对象类型的 1 screen 对象 访问screen 对象 et: console.log(window.screen ...
- sklearn特征工程
目录 一. 特征工程是什么? 2 ①特征使用方案 3 ②特征获取方案 4 ③特征处理 4 1. 特征清洗 4 2. 数据预处理 4 3. 特 ...
- 深入理解Kubernetes资源限制:内存
写在前面 当我开始大范围使用Kubernetes的时候,我开始考虑一个我做实验时没有遇到的问题:当集群里的节点没有足够资源的时候,Pod会卡在Pending状态.你是没有办法给节点增加CPU或者内存的 ...
- Java与CC++交互JNI编程
哈哈,经过了前面几个超级枯燥的C.C++两语言的基础巩固之后,终于来了到JNI程序的编写了,还是挺不容易的,所以还得再接再厉,戒骄戒躁,继续前行!! 第一个JNI程序: JNI是一种本地编程接口.它允 ...
- JAVA遇见HTML——JSP篇(JSP指令与动作元素)
- Linux使用帮助详解
主要内容: whatis command --help man and info ...
- Ubuntu Linux使用sudo命令搭建java环境
搬运stackoverflow 注意,以下所有命令需要在root权限下执行 1. 在Ubuntu下打开终端命令或用ssh连接到linux. 2. 更新仓库(只有Ubuntu17.4及以下系统可用): ...