本文实例为大家分享了vue实现图片上传功能的具体代码，供大家参考，具体内容如下
先看效果
图片上传使用vant组件库中的 van-uploader, 使用方法参考官网
vant组件库
下面看代码
UploadPicture.vue
<template>
<div class="content">
<!-- 底部模块start -->
<div class="bottom_bg">
<p class="flexst pt8">上传图片</p>
<div class="upload_bg">
<div
v-for="(item, index) in this.remUploadImgUrls">
<img class="showimg" :src="item"/>
<img
class="delicon"
src="@/assets/images/consult_close.png"
@click="(e) => delImgClick(index, e)"
/>
</div>
<!--
v-if="remUploadImgUrls.length < 6"
限制最多6张
-->
<img
class="addimg" src="@/assets/images/inq_addImg.png"
v-if="remUploadImgUrls.length < 6"
@click="openMenu"
/>
</div>
</div>
<!-- 底部模块end-->
<van-actionsheet
v-model="menuShow"
:actions="actions"
cancel-text="取消"
@select="onSelect"
/>
<van-uploader id="upload" :after-read="onRead"/>
</div>
</template><script>
import {mapState} from 'vuex'
export default {
name: "UploadPicture",
data() {
return {
menuShow: false,
actions: [
{
name: '历史照片'
},
{
name: '选择相册或拍照'
}
],
}
},
computed: {
...mapState({
remUploadImgUrls() {
return this.$store.state.uploadImgUrls;
}
})
},
methods: {
openMenu() {
this.menuShow = true
},
onSelect(item) {
this.menuShow = false
console.log(item);
if (item.name === '选择相册或拍照') {
return document.getElementById('upload').click();
}
},
onRead(file) {
this.$store
.dispatch({
type: 'uploadImg',
payload: file.file
})
.then(() => {
// Toast.clear;
});
},
delImgClick(index, e) {
let tmpList = [...this.remUploadImgUrls];
tmpList.splice(index, 1);
this.$store.commit('DEL_UPLOADIMG', tmpList);
}
},
}
</script>
<style scoped lang="scss">
.content {
.bottom_bg {
margin: 10px 8px 0;
padding: 0 .1rem;
background: #fff;
.upload_bg {
margin-top: 10px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
div {
width: 31%;
margin-bottom: 10px;
position: relative;
.showimg {
width: 100%;
height: 100%;
}
.delicon {
position: absolute;
right: -6px;
top: -6px;
width: 20px;
