vue图片上传

vue图片上传

先看效果

图片上传使用vant组件库中的 van-uploader, 使用方法参考官网
vant组件库 https://youzan.github.io/vant/#/zh-CN/intro
下面看代码

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);
    },
  },
});