jiliangxiaochengxu/components/companiesRegistered/uploadLicense.vue

<!-- @format -->

<template>
  <view class="container">
    <view style="color: #3c9cff" class="uploadTitle"
      >上传{{ formdData.type }}</view
    >
    <view class="updateContent">
      <view style="margin: 0 auto">
        <u-upload
          :fileList="fileList"
          @afterRead="afterRead"
          @delete="deletePic"
          :maxCount="1"
          width="280"
          height="180"
        >
          <view class="uploadTipcContent">
            <view>
              <view style="display: flex; justify-content: center">
                <u-icon name="arrow-upward" color="#2979ff" size="28"></u-icon>
              </view>
              <u-button
                :customStyle="{ color: '#3c9cff', fontSize: '26rpx' }"
                type="text"
                size="small"
                >点击上传</u-button
              >
            </view>
            <view class="topic">
              请上传{{ formdData.type }}正面照片，限制照片大小30MB。
            </view>
          </view>
        </u-upload>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  props: {
    formdData: {
      type: Object,
      default: () => ({}),
    },
  },
  created() {
    if (this.formdData.imageUrl) {
      this.fileList[0] = {
        url: this.$baseUrl + this.formdData.imageUrl,
      };
    }
  },
  onLoad() {},
  methods: {
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: JSON.parse(result.data).fileName,
          })
        );
        fileListLen++;
      }
      this.formdData.imageUrl = this.fileList[0].url;
      this.$emit(
        "update:formdData",
        Object.assign({ ...this.formdData, imageUrl: this.formdData.imageUrl })
      );
    },

    //上传
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: `${this.$baseUrl}/api/common/upload`, // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          success: (res) => {
            setTimeout(() => {
              resolve(res);
            }, 1000);
          },
        });
      });
    },
  },
};
</script>

<style lang="scss">
.uploadTipcContent {
  width: 555rpx;
  height: 260rpx;
  padding: 30rpx;
  border: 1px dotted#909399;
}
.topic {
  color: #909399;
  font-size: 24rpx;
  width: 400rpx;
  margin: 20rpx auto 0;
  font-family: "宋体";
}
.container {
  width: 100%;
}
.updateContent {
  display: flex;
  background: #fff;
  padding: 30rpx;
}
.uploadTitle {
  margin-bottom: 30rpx;
}
</style>