mobile-workflow/components/form/ImageUpload.vue

<template>
  <view>
    <l-upload
      ref="imgUpload"
      uploadType="img"
      :serverUrl="BASE_URL"
      :formData="{ isImg: 'true' }"
      :width="110"
      :height="110"
      :images="_value || []"
      :header="header"
      :max-size="props.formProps.maxSize"
      :disableAdd="readonly"
      :limit="props.formProps.maxNumber"
      @complete="complete"
      @remove="remove"
      :disable="readonly"
    >
    </l-upload>
    <view v-if="!readonly" style="color: #999999; font-size: 26rpx"
      >{{ props.formProps.placeholder || "请上传图片" }}
      {{ sizeTip }}
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { BASE_URL } from "@/api/request.js";
import {  checkfaceHikvisionApi } from "@/api/imageApi";
const imageStyles = {
  width: 80,
  height: 80,
  padding: "19rpx",
};

const header = ref({
  Authorization: "Bearer " + uni.getStorageSync("wflow-token"),
});

const props = defineProps({
  formProps: {
    type: Object,
    default: () => {
      return {};
    },
  },
  modelValue: Array,
  readonly: Boolean,
  title: String,
});
const originVal = ref([]);
const _value = computed({
  get() {
    return props.modelValue;
    let dealArr = [];
    // console.log(JSON.stringify(props.modelValue),123)
    // console.log(JSON.stringify(originVal.value),456)
    // console.log(JSON.stringify(dealArr),111222)
    if (JSON.stringify(props.modelValue) == JSON.stringify(originVal.value)) {
      return originVal.value;
    }
    originVal.value.length = 0;
    if (props.modelValue) {
      originVal.value = props.modelValue;
      console.log(JSON.stringify(originVal.value), 888);
      originVal.value.map((item) => {
        if (
          item.url.indexOf("http://") != -1 ||
          item.url.indexOf("https://") != -1
        ) {
          dealArr.push({
            ...item,
            id: item.name,
            url: item.name,
            // isImage: true,
            // contentType: "image/png",
          });
        } else {
          dealArr.push({
            ...item,
            id: item.url,
            url: item.url,
            // isImage: true,
            // contentType: "image/png",
          });
        }
      });
      return dealArr;
    } else {
      return props.modelValue;
    }
  },
  set(val) {
    emits("update:modelValue", val);
  },
});

const sizeTip = computed(() => {
  return props.formProps.maxSize > 0
    ? `| 每张图不超过${props.formProps.maxSize}MB`
    : "";
});

const emits = defineEmits(["update:modelValue", "resize"]);

const imgUpload = ref();

function resizeCollapse() {
  setTimeout(() => emits("resize"), 800);
}

async function complete(e) {
  console.log(JSON.stringify(e), 666777);
  console.log(props.title, 666778);
  if (props.title == "人脸采集图片") {
    const imgInfo = e.imageArr[0];
    if (
      imgInfo.contentType != "image/jpeg" &&
      imgInfo.contentType != "image/jpg"
      // file.type != "image/png"
    ) {
      uni.showToast({
        icon: "none",
        title: "请上传jpg格式图片",
      });
      return false;
    }
    let imgSize = Number(imgInfo.size / 1024);

    if (imgSize <= 10 || imgSize >= 200) {
      uni.showToast({
        icon: "none",
        title: "文件大小不能超过200kb小于10kb,请重新上传!",
      });
      return false;
    }
    let data = { fileUrl: imgInfo.url };
    const result = await checkfaceHikvisionApi(data);

    if (result.data.code == 200 && result.data.result.checkType == "1") {
      _value.value = e.imageArr;
    } else {
      uni.showToast({
        icon: "none",
        title: result.data.result.message,
      });
    }
  } else {
    _value.value = e.imageArr;
  }

  if ((_value.value || []).length < e.imageArr.length) {
    uni.showToast({
      icon: "none",
      title: "上传图片成功",
    });
  } else {
    uni.showToast({
      icon: "none",
      title: "移除图片成功",
    });
  }
  resizeCollapse();
}

function remove(i) {
  if (!props.readonly) {
    _value.value.splice(i, 1);
  }
}
</script>

<style></style>