h5 vant上传图片 上传文件 支持多张单张

效果图

• 一个图片上传一个文件上传

上代码

<template>
   <div class="myBox" :class="{'big':isbig}">
         // 照片文件展示 里面有的图片需要换成vant - icon 
              <div class="twoBox">
                <div class="dragBox ">
                  <div class="mr-10 mt-10 contentImgItem2" v-for="(item,index) in images" :key="index">
                    <img style="width:1.2rem; height: 1.2rem" :src="item.url" fit="contain" />
                    <span @click="removeIndexImg(index)" class="contentImgDel"><van-icon name="clear" /></span>
                  </div>
                </div>

                <div class="success-up">
                  <div v-for="(item,index) in fileArr" :key="index" class="file-list">
                    <span class="icon">
                      <!-- <van-icon name="orders-o" size="18" /> -->
                       <img class="img" style="width:.3rem" :src="getFormat(item.name)" alt="">
                    </span>
                    <!-- ({{(item.size/1024/1024).toFixed(3)}}MB) -->
                    <span class="file-text">{{item.name}}</span>
                   <span class="success"> <van-icon name="checked" />上传完成</span>
                    <span class="el-icon-circle-close close1" @click="deleteFile(index)">  <van-icon name="cross" /></span>
                  </div>
                </div>
// 上传图片 文件
                  <div class="myBoxFoot">
                    <!-- :preview-image="false" -->
                    <van-uploader   class="fl myupload" :disabled="images.length>=10" multiple  :before-read="beforeRead" :after-read="afterRead" :preview-image="false" accept="image/*">
                      <img :src="fileIcon1"   alt="">
                      <!-- <van-icon name="photo-o" size="22" style="margin-top:.26rem" /> -->
                    </van-uploader>
                    <!-- doc、pdf、xlsx -->
                    <van-uploader  class="fl myupload" :disabled="fileArr.length>=5" multiple  :before-read="beforeRead2" :after-read="afterRead2" :preview-image="false" accept=".doc,.docx,.pdf,.xlsx,.xls">
                       <img :src="fileIcon2"   alt="">
                        <!-- <van-icon name="peer-pay" size="22" style="margin-top:.26rem"/> -->
                    </van-uploader>

                    <div class="div3" @click="clickBig">
                      <img :src="fileIcon3" style="width:.4rem;height:.4rem"  alt="">
                    </div>
                  </div>
              </div>
          </div>
</template>
<script>
import { getToken } from '@/base/cookie'
import axios from 'axios'
export default {
  props: {
    images: {
      type: Array,
      default: () => []
    },
    fileArr: {
      type: Array,
      default: () => []
    },
  },

  data () {
    return {
      fileIcon: require('@/assets/followUp/wordImg.png'),
      fileIcon1: require('@/assets/followUp/upimg.png'),
      fileIcon2: require('@/assets/followUp/upfile.png'),
      fileIcon3: require('@/assets/followUp/upBlowup.png'),
      uploader: [],
      isbig: false,
      toast1: null,
      headers: {
        'X-Token': getToken()
      },
      fileList: [],
      action: process.env.VUE_APP_UPLOADER_API + '/file/upload'  // 上传路径
    }
  },
  mounted () {

  },
  methods: {
    getFormat (url) {
     return this.Global.getFormat(url)
    },
    // 上传

    beforeRead (file) {
      console.log(file);
       
      if (file instanceof Array && file.length) { // 判断是否是多图上传 多图则循环
        if(this.images.length + file.length > 10){
          this.$toast('照片最多上传10个')
          return false
        }
        let a = file.every(item => {
         return this.theVerify(item)
        })
        if(a){
          return true
        }else{
          return false
        }
      } else {
        if(this.images.length >= 10){
          this.$toast('照片最多上传10个')
          return false
        }
        if(this.theVerify(file)){
          return true
        }else{
          return false
        }
      }
     
     
    },

    theVerify (file) {
      var size = 1024 * 1024 * 10
      // 图片类型限制
     if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/bmp') {
        this.$toast('只支持jpg/jpeg/png/bmp格式图片!')
        return false
      }else if(file.size > size){
         const strSize = Math.floor(size / 1024 / 1024)
        this.$toast(`图片最大为${strSize}MB!`)
        return false
      }else{
        return true
      }
    },

    afterRead (files) {
      this.toast1 = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '上传中...'
      })
      if (files instanceof Array && files.length) { // 判断是否是多图上传 多图则循环添加进去
        files.forEach(item => {
          const dataone = new FormData()
          dataone.append('file', item.file)
          this.toUp(dataone, files.length)
        })
      } else {
        const dataone = new FormData()
        dataone.append('file', files.file) //  上传的是 File 对象
        this.toUp(dataone, 1)
      }
    },
    toUp (dataone, flength) {
      const imgcopy = JSON.parse(JSON.stringify(this.images)).length
      const config = {
        headers: {
          'X-Token': getToken()
        }
      }

      axios.post(`${process.env.VUE_APP_BASE_API}` + '/api/upload', dataone, config).then(res => {
        if (res.data.code == 0) {
          if (this.images.length < 10) {
            this.images.push({
              type: 1,
              url: res.data.data.filePath,
              size: res.data.data.fileSize,
              name: res.data.data.fileName,
              suffix: res.data.data.fileFormat
            })

            if (this.images.length - imgcopy === flength) {
              this.$toast.clear()
            }
          }

          // this.$refs.form.clearValidate('images')
        } else {
          this.$toast.clear()
          this.$toast(res.data.msg)
        }
      })
    },

    // 上传文件
    beforeRead2 (file) {
      if (this.fileArr.length === 5) {
        this.$message.warning('限制文件最多上传5个')
        return
      }
      const allowType = ['.doc', '.pdf', '.xlsx', '.xls']
      var index = allowType.indexOf(file.name.substring(file.name.lastIndexOf('.')).toLowerCase())
      if (index < 0) {
        this.$toast('只支持doc/pdf/xlsx/xls格式文件!')
        return false
      }
      var size = 1024 * 1024 * 10
      // 图片大小限制
      if (file.size > size) {
        const strSize = Math.floor(size / 1024 / 1024)
        this.$toast(`文件最大为${strSize}MB!`)
        return false
      }
      this.toast1 = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '上传中...'
      })
      return true
    },
    afterRead2 (files) {
      const dataone = new FormData()
      dataone.append('file', files.file) //  上传的是 File 对象

      const config = {
        headers: {
          'X-Token': getToken()
        }
      }
      axios.post(`${process.env.VUE_APP_BASE_API}` + '/api/upload', dataone, config).then(res => {
        if (res.data.code == 0) {
          if (this.fileArr.length < 5) {
            this.fileArr.push({
              type: 2,
              url: res.data.data.filePath,
              size: res.data.data.fileSize,
              name: res.data.data.fileName,
              suffix: res.data.data.fileFormat
            })
            this.$toast.clear()
          }
        } else {
          this.$toast.clear()
          this.$toast(res.data.msg)
        }
      })
    },
    // 删除上传的文件
    deleteFile (index) {
      this.msg = ''
      this.fileArr.splice(index, 1)
    },
    removeIndexImg (ix) {
      this.images.splice(ix, 1)
    },
    clickBig () {
      this.isbig = !this.isbig
    }
  }
}
</script>

<style lang="scss" scoped>
.myBox{

  &.big{
     margin: 0;
  }

  border-radius: 4px;
  /deep/.el-textarea__inner{
    border:none
  }
  .myBoxFoot{
    padding: 0 .3rem;
    height: 1rem;
    line-height: 1rem;
    background-color: #efefef;
    .myupload{
      margin-right: .16rem;
      margin-top: .1rem;
      width: .4rem;
      height: .4rem;
      img{
         width: .4rem;
        height: .4rem;
      }
    }
    .div3{
      float: right;
      img{
         margin-top: .28rem;
        width: .5rem;
        height: .5rem;
      }
    }
  }
  .twoBox{
    margin:-0.3rem 0.4rem 0;
    background-color: #f8f8f8;
  }
   .dragBox { // 图片展示
      margin-top:.3rem;
      padding: 0.16rem 0.26rem;
      width: calc(100% - 0px);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;

      .contentImgItem2 {
        flex-wrap: wrap;
        width: 1.2rem;
        height: 1.2rem;
        // border: 1px dashed #cccccc;
        position: relative;
        .contentImgDel {
          position: absolute;
          right: -10px;
          top: -10px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          i {
            width: 100%;
            font-size: 20px;
            color: #333;
          }
        }
      }
    }
      .success-up { // 文件展示
        padding: 0 0.26rem;
        width: 100%;
        // height: .6rem;
        // line-height: .6rem;
        background-color: #eef2f8;
        display: flex;
        align-items: center;
        flex-direction: column;
        .file-list {
          margin-top:.1rem;
          background-color: #eef2f8;
          width: 100%;
          padding: 0 2px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .icon {
            color: #333;
            // margin-right: 10px;
          }
          .file-text {
              width: calc(100% - 3.2rem);
              height: .7rem;
              line-height: .7rem;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              color: #333;
              i {
                color:#666;
                margin-left: 10px;
              }
            }
            .success{
              display: block;
              background-color: #d7eae3;
              color: #4CBD11;
              padding: .1rem;
            }
          .close1 {
            text-align: center;
            width: .6rem;
            font-size: 18px;
            color: rgba(216, 216, 216, 1);
            cursor: pointer;
          }
        }
      }
  &.big{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    z-index: 2003;
    padding:  0.3rem;
    // text-align: right;
    background: #fff;
    overflow: auto;
  }
}

</style>