soc_app/src/components/upload/index.vue

<template>
  <!-- <div>
    <van-uploader
      accept=""
      ref="uploader"
      v-bind="$attrs"
      v-model="fileList"
      :max-count="maxCount"
      :multiple="multiple"
      @click-upload="useCamera(2)"
      @delete="deleteHandler"
      :max-size="maxSize * 1024 * 1024"
    />
    &lt;!&ndash; :after-read="afterRead" &ndash;&gt; &lt;!&ndash; :before-read="beforeRead" &ndash;&gt;
  </div> -->
  <div>
    <div style="float: left">
      <van-uploader
        ref="uploader"
        v-bind="$attrs"
        v-model="fileList"
        :max-count="maxCount"
        @delete="deleteHandler"
        :show-upload="false"
        :max-size="maxSize * 1024 * 1024"
        />
        <!-- :before-read="beforeRead"
        :after-read="afterRead" -->
    </div>
    <div  class="van-uploader__upload" @click="selectCameraHandler()">
      <i class="van-icon van-icon-photograph van-uploader__upload-icon">
      </i>
    </div>
    <van-popup
      v-model="selectCamera"
      position="bottom"
      :style="{ height: '20%' }"
    >
      <van-cell-group>
        <van-cell icon="photograph" title="拍照" @click="useCamera(1)" />
        <van-cell icon="photo" title="从相册选择" @click="useCamera(2)" />
        <van-cell icon="clear" title="取消" @click="selectCamera = false" />
      </van-cell-group>
    </van-popup>
  </div>
</template>
<script>
import { imgUrl } from '@/utils'
import { uploadBase64 } from '@/api/public'

import ImageCompressor from 'js-image-compressor'
import config from '@/config/index'
export default {
  props: {
    value: {
      type: Array
    },
    multiple: {
      type: Boolean,
      default: false
    },
    //最大上传数量
    maxCount: {
      type: Number,
      default: 6
    },
    //文件大小，单位MB
    maxSize: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      fileList: [],
      //上传之后的图片列表，双向绑定之后覆盖fileList
      imageList: [],
      selectCamera:false
    }
  },

  mounted() {
    window.openCameraCallBack = this.openCameraCallBack
  },
  watch: {
    value: {
      handler(val) {
        this.imageList = this.fileList = val.map(v => {
          let imgUrl = process.env.NODE_ENV === 'development' ? '/dev' + v.path : window.origin + v.path

          return {
            name: v.name,
            url: imgUrl,
            path: v.path
          }
        })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    selectCameraHandler() {
      this.selectCamera = true;
    },
    useCamera(actionType) {
      this.selectCamera = false;
      window.openCameraCallBack = null
      window.openCameraCallBack = this.openCameraCallBack
      let parms = {}
      if (actionType) {
        parms.actionType = actionType
        parms.compressKb = '500'
      }
      let system = this.isAndroidOrIos()
      if (system === 1) {
        //android
        // 判断当前环境是是否存在 js桥 'sap'
        const hasSap = window.hasOwnProperty('sap')
        if (hasSap) {
          // 判断是否存在方法 ?preview
          const fun = sap.hasOwnProperty('openCamera')
          if (fun) {
            sap.openCamera(JSON.stringify(parms))
          }
        }
      }

      if (system === 2) {
        //ios
        // 判断 ios是否存在方法 preview
        const preview = window.webkit.messageHandlers.hasOwnProperty('openCamera')
        if (preview) {
          window.webkit.messageHandlers.openCamera.postMessage(JSON.stringify(parms))
        }
      }
    },

    openCameraCallBack(data) {
      let params = {}
      try {
        let img = JSON.parse(data)
        params = {
          extension: img.extension,
          content: img.content
        }
      } catch (e) {
        params = {
          extension: data.extension,
          content: data.content
        }
      }
      uploadBase64(params)
        .then(res => {
          /*上传成功*/
          this.$toast.success('上传成功')
          this.imageList.push({ name: res.data.name, url: imgUrl(res.data.url), path: res.data.url })
          this.$emit('input', this.imageList)
        })
        .catch(err => {
          /*上传失败*/
          this.$toast.fail('上传失败')
          this.fileList.splice(this.fileList.length - 1, 1)
        })
    },

    //删除
    deleteHandler() {
      let imageList = JSON.parse(JSON.stringify(this.fileList))
      imageList.forEach(item => {
        item.imgPath = item.path
        item.path = item.imgPath
      })

      this.$emit('input', imageList)
    }
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  destroyed() {
    window.openCameraCallBack = null
  }
}
</script>
<style lang="scss" scoped>
.upload-text {
  font-size: 18px;
  color: #999;
  margin-top: 5px;
}
</style>