vue webapp项目中图片上传组件

<template>
<div class="upload-img common-padding">
<ul class="business-type no-margin" v-if="showTitle">
<li class="list ">
<label>{{title}}</label>
</li>
</ul>
<div class="box">
<template v-if="imageListValue instanceof Array && imageListValue.length > 0">
<div class="upload-text"  v-for="(item, index) in imageListValue" :key="index"  @click="removeImg(item)">
<img :src="publicHost + item.attachmentPath" class="result-img"/>
</div>
</template>
<div class="receive-img"  v-if="(Object.prototype.toString.call(imageListValue) === '[object Object]') && Object.keys(imageListValue).length !== 0" @click="removeImg()">
<img :src="publicHost + imageListValue.attachmentPath" class="result-img"/>
</div>

<label>
<div class="upload-text" v-if="showAdd">
<img src="./../../../static/img/common/add.png" class="add-plus"/>
</div>
<slot name="upload-img" v-if="!(imageListValue instanceof Array) && !imageListValue"></slot>
<input type="file"  capture="camera" accept="image/png,image/gif,image/jpeg" class="hidden" @change="getBaseUrl($event)"/>
</label>
</div>
</div>
</template>
<script>
import { MessageBox } from 'mint-ui'
import {uploadFileByBase64Str} from '@/api/file'
export default{
data () {
return {
image: null,
temp: []
}
},
props: {
title: {
default: '标题',
type: String
},
imageList: {},
showAdd: {
type: Boolean,
default: true
},
showTitle: {
type: Boolean,
default: true
}
},
computed: {
imageListValue: {
get: function () {
return this.imageList
},
set: function (newValue) {
this.$emit('update:imageList', newValue)
}
},
publicHost () {
return this.$store.state.dictionary.publicHost + '/'
}
},
components: {},
methods: {
removeImg (url) {
MessageBox.confirm('是否删除该图片?').then(action => {
if (this.imageListValue instanceof Array) {
this.imageListValue.map(val => {
if (val.attachmentPath === url.attachmentPath) {
this.imageListValue.splice(this.imageListValue.indexOf(val), 1)
this.$emit('deleteImg', val)
}
})
} else {
this.imageListValue = {}
}
})
},
getBaseUrl (e) {
const file = e.target.files[0]
const reader = new FileReader()
reader.readAsDataURL(file)// 读出 base64
let _this = this
reader.onloadend = function () {
const dataURL = reader.result
const data = {
fileName: file.name,
fileStr: dataURL
}
uploadFileByBase64Str(data).then(res => {
if (res.code === 200) {
const attachmentUrl = res.result[0]
if (_this.imageListValue instanceof Array) {
_this.imageListValue.push(attachmentUrl)
} else {
_this.imageListValue = attachmentUrl
}
}
})
}
}
}
}
</script>
<style lang="less">
#fileInput {
display: none;
}
.box{
.img-preview{
display: none;
}
}
</style>
<style lang='less' scoped>
@import "./../../public/comment";
.hidden{
display: none;
}
.upload-img{
padding-bottom: 10px/2;
margin-bottom: 10px/2;
background-color: #fff;
.business-type{
margin: 20px auto;
}
.no-margin{
margin: 0;
}
.upload-text{
background: #F2F2F2;
width: 160px/2;
height: 160px/2;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px/2 20px/2;
.result-img{
width: 100%;
height: 100%;
}
.add-plus{
width: 60%;
}
}
.receive-img{
height: 160px/2;
img{
height: 100%;
}
}
}
.box{
display: flex;
flex-wrap: wrap;
}
.list{
width: 100%;
height: 104px/2;
display: flex;
align-items: center;
font-size: 32px/2;
color: #333333;
background-color: #fff;
margin-bottom: 5px/2;
label{
width: 260px/2;
}
.text-1{
font-size: 28px/2;
color: #999999;
}
.text-2{
color: @lightBlue;
}
}

</style>