# 封装一个支持安卓多图上传的组件

[YIngChenIt]

封装一个支持安卓多图上传的组件

背景

项目的h5网站是直接跑在微信浏览器或者小程序中的，虽然我们设置了multiple，但是发现在ios是可以实现多图上传的，但是在安卓却发现一次只可以上传一张图片

封装

考虑到这个是安卓系统对的网页支持不够，所以只可以通过一些客户端的桥方法来实现这个需求

但是我们的网页没有跑在自己的客户端环境下，纠结了一会之后决定用微信作为我们的客户端容器，使用微信公众号提供的JDK来调用相册选择图片

JDK文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

但是这个方案有个弊端，就是只用于有微信公众号并且公众号后台配置了安全域名为项目域名的情况~~

这里就直接贴代码吧，比较简单

<template>
  <div class="upload-container">
    <div class="van-uploader">
      <div class="van-uploader__wrapper">
        <div :key="index" v-for="(item, index) in imageList" class="van-uploader__preview">
          <div @click="preview(index)" class="van-image van-uploader__preview-image">
            <img :src="item.url" class="van-image__img" style="object-fit: cover;" />
          </div>
          <div v-if="item.type === 1" class="van-uploader__mask">
            <div class="van-loading van-loading--circular van-uploader__loading">
              <span class="van-loading__spinner van-loading__spinner--circular">
                <svg viewBox="25 25 50 50" class="van-loading__circular">
                  <circle cx="50" cy="50" r="20" fill="none" />
                </svg>
              </span>
            </div>
            <div class="van-uploader__mask-message">上传中...</div>
          </div>
          <div v-if="item.type === 2" class="van-uploader__mask">
            <i class="van-icon van-icon-warning-o van-uploader__mask-icon">
            </i>
            <div class="van-uploader__mask-message">上传失败</div>
          </div>
          <i
            @click="deleteImage(index, item)"
            v-if="showClose && item.type !== 1"
            class="van-icon van-icon-clear van-uploader__preview-delete"
          ></i>
        </div>
        <div @click="chooseImage" v-if="imageList.length < maxCount" class="van-uploader__upload">
          <i class="van-icon van-icon-photograph van-uploader__upload-icon"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'

export default {
  data() {
    return {
      configFlag: true
    }
  },
  props: {
    imageList: {
      type: Array
    },
    appId: {
      type: String,
      default: ''
    },
    timestamp: {
      type: String,
      default: ''
    },
    nonceStr: {
      type: String,
      default: ''
    },
    signature: {
      type: String,
      default: ''
    },
    showClose: {
      type: Boolean,
      default: true
    },
    maxCount: {
      type: Number,
      default: 4
    },
    previewFullImage: {
      type: Boolean,
      default: true
    },
    multiple: {
      type: Boolean,
      default: true
    }
  },
  created() {
    if (this.isWx) {
      this.$nextTick(() => {
        this._initWxConfig()
      })
    }
  },
  computed: {
    isWx() {
      const ua = navigator.userAgent.toLowerCase()
      const isWeixin = ua.indexOf('micromessenger') != -1
      return isWeixin
    }
  },
  methods: {
    _initWxConfig() {
      wx.config({
        appId: this.appId,
        timestamp: this.timestamp,
        nonceStr: this.nonceStr,
        signature: this.signature,
        jsApiList: ['chooseImage', 'uploadImage', 'checkJsApi']
      })
      wx.ready(function() {
        wx.checkJsApi({
          jsApiList: ['chooseImage', 'uploadImage', 'checkJsApi']
        })
      })
      wx.error(function() {
        this.configFlag = false
      })
    },
    chooseImage() {
      const that = this
      wx.chooseImage({
        count: this.maxCount - this.imageList.length,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success(res) {
          const localIds = res.localIds
          const localIdsLenght = localIds.length
          let index = 0
          upload()
          function upload() {
            if (index === localIdsLenght) {
              return
            }
            wx.uploadImage({
              localId: localIds[index],
              isShowProgressTips: 1,
              success: function(res) {
                const serverId = res.serverId
                that.$emit('uploadImage', {
                  serverId,
                  cb: () => {
                    index++
                    upload()
                  }
                })
              }
            })
          }
        }
      })
    },
    preview(index) {
      if (!this.previewFullImage) return
      const imageList = this.imageList.filter((item) => item.type === 0).map((item) => {
        return item.url
      })
      ImagePreview({
        images: imageList,
        closeable: true,
        startPosition: index
      })
    },
    deleteImage(index, item) {
      this.$emit('delete', { index, item })
    }
  }
}
</script>

<style lang="less" scoped>
.upload-container {
  .upload-no-img {
    width: 60px;
    height: 60px;
    border: 1px solid #e4e4e4;
    position: relative;
    &::before {
      position: absolute;
      left: 29px;
      top: 13px;
      content: '';
      width: 2px;
      height: 34px;
      background-color: #dcdcdc;
    }
    &::after {
      position: absolute;
      right: 13px;
      top: 29px;
      content: '';
      width: 34px;
      height: 2px;
      background-color: #dcdcdc;
    }
  }
  .upload-item {
    position: relative;
    width: 60px;
    height: 60px;
    border: 1px solid #e4e4e4;
    float: left;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 0;
    margin: 0 5px 10px 0;
    .upload-item-image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

使用

<imageUpload
    imageList={this.imageList}
    appId={this.wxAppId}
    timestamp={this.timestamp}
    nonceStr={this.nonceStr}
    signature={this.signature}
    max-count={5}
    showClose={true}
    previewFullImage={true}
    on-uploadImage={this.uploadImageByWx}
    on-delete={this.deleteImage}
/>