vue之上传组件展示图片样板(仅页面展示用)
代码如下
<template>
<div class="content-box">
<div class="title">点击上传图像 (支持image/jpg,image/jpeg,image/png,image/gif格式图片 且大小不能超过2MB)</div>
<div class="uploadImg">
<span class="el-icon-plus"></span>
<input
:accept="accept"
type="file"
class="upload_ipu"
ref="fileLoad"
@change="uploadImg"
/>
<img v-if="imgShow" :src="imgSrc" />
</div>
</div>
</template>
<script>
export default {
props: {
accept: {
type: String,
default: 'image/jpg,image/jpeg,image/png,image/gif'
}
},
data() {
return {
imgShow: false,
imgSrc: ''
}
},
methods: {
createUrl(file) {
// console.log(file);
if (window.URL) {
// console.log(window.URL.createObjectURL(file));
return window.URL.createObjectURL(file)
} else if (window.webkitURL) {
return window.webkitURL.createObjectURL(file)
} else {
return null
}
},
uploadImg() {
let file = this.$refs.fileLoad.files[0]
let size = file.size / 1024 / 1024
if (!this.accept.includes(file.type.toLowerCase())) {
this.$message.error('图片格式不正确!')
return false
}
if (size > 2) {
this.$message.error('图片大小不能超过2MB!')
return false
}
this.imgSrc = this.createUrl(file)
console.log(this.imgSrc);
this.imgShow = true
this.$message.success('上传成功!')
}
}
}
</script>
<style lang="scss" scoped>
.title{
font-size: 16px;
color: #aaa;
}
.uploadImg {
margin-top: 20px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 180px;
height: 180px;
transition: all 0.2s;
&:hover {
border-color: #409eff;
}
span {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.upload_ipu {
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
z-index: 2;
}
img {
width: 178px;
height: 178px;
position: absolute;
border-radius: 6px;
left: 0;
top: 0;
z-index: 1;
}
}
</style>
主要使用方法
createUrl(file) {
if (window.URL) {
return window.URL.createObjectURL(file)
} else if (window.webkitURL) {
return window.webkitURL.createObjectURL(file)
} else {
return null
}
},
效果如下
参考网站:在web应用程序中使用文件
添加水印版本
代码如下
<template>
<div class="content-box">
<div class="title">
点击上传图像(支持image/jpg,image/jpeg,image/png,image/gif格式图片且大小不能超过10MB)
</div>
<div class="uploadImg">
<span class="el-icon-plus"></span>
<input
:accept="accept"
type="file"
class="upload_ipu"
ref="fileLoad"
@change="uploadImg"
/>
</div>
<div class="imgList">
<img v-if="imgShow" :src="imgSrc" />
</div>
<!-- 图片上传水印 -->
<div id="markImg">
<div class="logo">
<img src="@/assets/logo.png" />
图片水印
</div>
<p>
{{ parseTime(fileDate, '{y}-{m}-{d} {h}:{i}:{s}') }} 周{{
parseTime(fileDate, '{a}')
}}
</p>
<p>{{ loginName }}</p>
</div>
</div>
</template>
<script>
import { parseTime, compressor, addWaterMarker } from '@/utils'
export default {
props: {
accept: {
type: String,
default: 'image/jpg,image/jpeg,image/png,image/gif'
}
},
data() {
return {
imgShow: false,
imgSrc: '',
loginName: 'fqniu',
fileDate: new Date(),
needWaterMark: true
}
},
created() {
this.parseTime = parseTime
},
methods: {
createUrl(file) {
if (window.URL) {
return window.URL.createObjectURL(file)
} else if (window.webkitURL) {
return window.webkitURL.createObjectURL(file)
} else {
return null
}
},
async uploadImg() {
let file = this.$refs.fileLoad.files[0]
let size = file.size / 1024 / 1024
console.log(file, file.lastModifiedDate);
if (!this.accept.includes(file.type.toLowerCase())) {
this.$message.error('图片格式不正确!')
return false
}
if (size > 10) {
this.$message.error('图片大小不能超过10MB!')
return false
}
// 压缩图片
if (file.size > 512 * 1024 && file.type.includes('image/')) {
file = await compressor(file)
}
// 添加水印
if (this.needWaterMark) {
const fileName = file.name
file = await addWaterMarker(file, '#markImg')
file.name = fileName
}
this.imgSrc = this.createUrl(file)
this.imgShow = true
this.$message.success('上传成功!')
}
}
}
</script>
<style lang="scss" scoped>
.title {
font-size: 16px;
color: #aaa;
}
.uploadImg {
margin-top: 20px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 180px;
height: 180px;
transition: all 0.2s;
&:hover {
border-color: #409eff;
}
span {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.upload_ipu {
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
z-index: 2;
}
img {
width: 178px;
height: 178px;
position: absolute;
border-radius: 6px;
left: 0;
top: 0;
z-index: 1;
}
}
.imgList{
width: 550px;
height: 400px;
img{
width: 100%;
height: 100%;
}
}
// 水印样式
#markImg {
position: absolute;
left: -9999999px;
text-align: right;
padding: 10px 15px;
.logo {
font-weight: 600;
font-size: 15px;
color: #ffffff;
display: flex;
height: 21px;
align-items: center;
justify-content: flex-end;
img {
height: 21px;
margin-right: 5px;
}
}
p {
margin-top: 6px;
color: #ffffff;
font-size: 12px;
font-weight: 400;
}
}
</style>
使用到的添加水印方法可以看我之前的博客