storevisit-ui-mobile/src/components/complaintImg.vue

<template>
  <div class="cameraDiv1">
    <p class="coverImg" @click="uploadImg">
      <van-icon class="photo ico" name="photograph" size="24px" color="#969696"></van-icon>
    </p>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import axios from 'axios';
import { addPhotoK } from '@/api/clew';
import { getPosition, getTicketFun } from '@/utils/TXApiFun';

export default {
  name: 'uploadImg',
  props: {
    itemData: {
      type: Object,
      default: {},
    },
    isRequired: {
      // 是否开启拍照前校验
      type: Boolean,
      default: true,
    },
    customerClueId: {
      type: String | Number,
      default: '',
    },
    customerClueItemId: {
      type: String | Number,
      default: '',
    },
  },
  data() {
    return {};
  },
  created() {
    // 授权
    getTicketFun(['chooseImage', 'uploadImage']).then(() => {});
  },
  methods: {
    uploadImg() {
      // 拍照前校验
      if (this.required) {
      }
      this.wx.ready(() => {
        this.wx.chooseImage({
          count: 1,
          sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有 compressed:压缩后的图片；original：原图
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          defaultCameraMode: 'normal', //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。从3.0.26版本开始支持front和batch_front两种值，其中front表示默认为前置摄像头单拍模式，batch_front表示默认为前置摄像头连拍模式。（注：用户进入拍照界面仍然可自由切换两种模式）
          isSaveToAlbum: 0,
          success: (res) => {
            let localIds = '';
            if (res.localIds != undefined) {
              localIds = res.localIds[0];
            } else {
              localIds = res.localId;
            }
            // andriod中localId可以作为img标签的src属性显示图片；
            // iOS应当使用 getLocalImgData 获取图片base64数据，从而用于img标签的显示（在img标签内使用 wx.chooseImage 的 localid 显示可能会不成功）
            wx.uploadImage({
              localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
              isShowProgressTips: 1, // 默认为1，显示进度提示
              success: (res) => {
                this.addPhotoK(res.serverId);
              },
            });
          },
        });
      });
    },
    addPhotoK(meidaId) {
      var form = {
        mediaId: meidaId,
        customerClueId: this.customerClueId,
        customerClueItemId: this.customerClueItemId,
      };
      this.toastLoading(0, '加载中...', true);
      addPhotoK(form).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          this.$toast('上传成功！');
          this.$emit('newimgarr', {
            fileUrl: res.data.url,
            id: res.data.fileId,
            itemData: this.itemData,
          });
        } else {
          this.$toast('上传失败！');
        }
      });
    },
  },
};
</script>

<style scoped>
.cameraDiv1 {
  height: 100%;
  width: 100%;
}

.cameraDiv1 img {
  /* position: absolute;
  width: 100%;
  display: block;
  height: 20px;
  top: 0; */
}

.imgPre {
  height: 20px;
  width: 100%;
  background-color: white;
  border-radius: 6px;
  overflow: hidden;
}

.photos1 {
  margin: 0px auto;
  left: 20%;
  margin-left: -14px;
}

.photobrowsing {
  position: absolute;
  padding: 4px;
  right: 0;
  top: 0;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

.coverImg {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.coverImg .ico {
  top: 0%;
}
</style>