vue实现图片上传功能

发布日期： 2026-01-12 阅读量： 作者： 用户投稿

本文实例为大家分享了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;
 height: 20px;
 }
 }
 .addimg {
 width: 31%;
 height: 31%;
 margin-bottom: 10px;
 }
 &:after {
 width: 30%;
 content: '';
 }
 }
 }
 }

</style>

src/store/index.js

import Vue from 'vue';
import vuex from 'vuex';
import { get, post} from '@/api';

Vue.use(vuex);
export default new vuex.Store({
 module: {
 },
 state: {
 uploadImgUrls: [],
 },
 mutations: { // 处理同步方法
 SET_UPLOADIMG(state, imgUrl) {
 const tmp = state.uploadImgUrls;
 tmp.push(imgUrl);
 state.uploadImgUrls = tmp;
 },
 DEL_UPLOADIMG(state, data) {
 state.uploadImgUrls = [...data];
 },
 },
 actions: { // 处理异步方法
 // 上传图片
 async uploadImg({ commit }, { payload }) {
 let f = new FormData();
 f.append('file', payload);
 const data = await post('/upload', f);
 commit('SET_UPLOADIMG', data);
 },
 },
});

更多文章可以点击《Vue.js前端组件学习教程》学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇: IDEA2025.1同步系统设置到GitHub的方法

下一篇: Java try catch finally异常处理组合详解

vue实现图片上传功能

随便看看

南昌壹佳企网络通信有限公司