vue实现图片上传功能

本文实例为大家分享了vue实现图片上传功能的具体代码，供大家参考，具体内容如下

先看效果

图片上传使用vant组件库中的 van-uploader, 使用方法参考官网
vant组件库

下面看代码

UploadPicture.vue

 .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: '';
 }
 }
 }
 }

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实战教程》

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