vue 이미지 업로드 기능 구현

본 논문 의 사례 는 vue 가 이미지 업로드 기능 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
효과

사진 업 로드 는 vant 구성 요소 라 이브 러 리 의 van-uploaader 를 사용 하고 사용 방법 은 홈 페이지 를 참고 합 니 다.
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 실전 교정》.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.