uni-Identify-quality/components/fl-upload/fl-upload.vue

<template>
  <view class="row">
    <view v-if="fileList.length === 0 && domS"
          class="row items-center justify-center"
          :class="uploadClass + ' ' + sfClass"
          @click="uploadChoose"
          style="
        width: 272rpx;
        height: 160rpx;
        background-color: #f4f5f7;
        border-radius: 2px;
      ">
      <view class="col-12 u-upload__button"
            :class="uploadClass?'':'cross'">
      </view>
    </view>

    <u-upload v-else-if="sfslot"
              :fileList="fileList"
              :maxCount="maxCount"
              :deletable="deletable"
              :multiple="multiple"
              :disabled="disabled"
              :accept="accept"
              :width="width"
              :height="height"
              @afterRead="afterRead"
              @delete="deletePic">
      <slot name="imagecontent"></slot>
    </u-upload>

    <u-upload v-else
              :class="[uploadClass, 'border-4']"
              :fileList="fileList"
              :maxCount="maxCount"
              :deletable="deletable"
              :uploadText="uploadText"
              :multiple="multiple"
              :disabled="disabled"
              uploadIcon="plus"
              uploadIconColor="#3c9cff"
              :accept="accept"
              :width="width"
              :height="height"
              @afterRead="afterRead"
              @delete="deletePic">
    </u-upload>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { postDataByParams } from "@/util/axios/index";
import { baseUrl } from "@/common/config";

export default {
  props: {
    uploadText: String,
    deletable: {
      type: Boolean,
      default: true,
    },
    uploadUrl: String,
    disabled: {
      type: Boolean,
      default: false,
    },
    val: {
      type: String,
    },
    accept: String,
    width: {
      type: [String, Number],
      default: 80,
    },
    height: {
      type: [String, Number],
      default: 80,
    },
    // 类身份证背景
    uploadClass: String,
    // 其他样式
    sfClass: String,
    domS: {
      type: Boolean,
      default: true,
    },
    sfslot: {
      type: Boolean,
      default: false,
    },
  },

  created () {
    if (this.uploadUrl) {
      this.uploadApi = baseUrl + this.uploadUrl;
    }
  },
  data () {
    return {
      uploadApi: baseUrl + "api/uploadpic",
      fileList: [],
      maxCount: 1,
      multiple: false,
      requestErr: ['{"errMsg":"uploadFile:fail timeout","data":" "}', '{"errMsg":"uploadFile:fail","data":" "}']
    };
  },
  watch: {
    val () {
      let defalut = this.val;
      if (!defalut) {
        defalut = null;
      }
      if (defalut) {
        this.fileList = [];
        let fileObj = { url: this.accept !== 'video' ? (defalut + '?x-bce-process=image/format,f_webp') : defalut };
        this.fileList.push(fileObj);
      }
    },
  },
  methods: {
    // 删除图片
    deletePic (event) {
      this[`fileList`].splice(event.index, 1);
      this.$emit("triggerUploadSuccess", "");
    },
    // 新增图片
    async afterRead (event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      if (this.domS) {
        event.type === "image/png" ? event.type === "image" : event.type;
        let obj = {
          name: event.name,
          size: event.size,
          thumb: event.path,
          type: event.type,
          url: event.path,
        };
        lists = [].concat(obj);
      }
      let fileListLen = this[`fileList`].length;
      lists.map((item) => {
        this[`fileList`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        if (this.requestErr.includes(result)) {
          this.$refs.uToast.show({
            type: "error",
            message: "上传失败，请稍后再试！",
          });
          this.$emit("triggerUploadFailed");
        }
        else if (JSON.parse(result).code !== 0) {
          this.$refs.uToast.show({
            type: "error",
            message: "上传失败",
          });
          this.$emit("triggerUploadFailed");
        } else {
          this.$emit("triggerUploadSuccess", JSON.parse(result).data);
        }
        let item = this[`fileList`][fileListLen];
        this[`fileList`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: this.requestErr.includes(result) ? 'failed' : (JSON.parse(result).code === 0 ? "success" : "failed"),
            message: "",
            url: this.accept !== 'video' ? (JSON.parse(result).data + '?x-bce-process=image/format,f_webp') : JSON.parse(result).data,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise (url) {
      return new Promise((resolve, reject) => {
        const Authorization = uni.getStorageSync("Authorization");
        let a = uni.uploadFile(
          {
            url: this.uploadApi,
            filePath: url,
            name: "file",
            formData: {},
            header: {
              Authorization,
            },
            success: (res) => {
              resolve(res.data);
            },
            fail: (err) => {
              Object.assign(err, { data: " " })
              resolve(JSON.stringify(err));
            }
          }
        );
      });
    },
    uploadChoose () {
      if (this.disabled) {
        return
      }
      if (this.accept === 'video') {
        uni.chooseVideo({
          sourceType: ['album', "camera"],
          maxDuration: 180,
          success: (res) => {
            if (!res.tempFile) {
              res.tempFile = {}
              res.tempFile.path = res.tempFilePath
              res.tempFile.name = res.tempFilePath
              res.tempFile.size = res.size
              res.tempFile.type = 'video/mp4'
            } else {
              res.tempFile.path = res.tempFilePath
            }
            this.afterRead(res.tempFile);
          },
          fail: (e) => {
            if (e.errMsg == "chooseVideo:fail No Permission") {
              return uni.$u.toast('请您在"设置"中手动开启权限,完成上传功能！');
            }
          },
        });
        return
      }
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: (res) => {
          this.afterRead(res.tempFiles[0]);
        },
        fail: (e) => {
          if (e.errMsg == "chooseImage:fail No Permission") {
            return uni.$u.toast('请您在"设置"中手动开启权限,完成上传功能！');
          }
        },
      });

    },
  },
};
</script>

<style lang="scss" scoped>
.cross {
  position: relative;
  width: 26px;
  height: 26px;
}

.cross::before,
.cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #3c9cff;
}

.cross::before {
  transform: translateY(-50%);
}

.cross::after {
  transform: translateY(-50%) rotate(90deg);
}
/deep/ .u-upload__button {
  margin: 0 !important;
}
/deep/ .u-upload__wrap {
  display: flex;
  justify-content: center;
}
/deep/ .u-upload__wrap__preview {
  margin: 0 !important;
}
</style>