uview自定义样式上传图片_uview上传图片

<yz-upload :fileList1="fileList1" :maxCount="1">
   <template v-slot>
      <div style="width: 200rpx; height: 200rpx">自定义内容</div>
   </template>
 </yz-upload>

<template>
  <u-upload
    :fileList="fileList1"
    @afterRead="afterRead"
    @delete="deletePic"
    name="1"
    multiple
    :maxCount="maxCount"
  >
    <slot></slot>
  </u-upload>
</template>
 
<script>
export default {
  props: {
    maxCount: { // 最大上传数量
      type: Number,
      default: 1,
    },
    fileList1: { // 父组件接受数组
      type: Array,
      default: () => [],
    },
    name: { // 标识 name1 父组件接受值 fileList1 name：2 父组件接受值 fileList2 在data中声明即可
      type: String,
      default: "1",
    },
  },
  data() {
    return {};
  },
  methods: {
    // 删除图片
    deletePic(event) {
      console.log(event.name, "event.name");
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 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,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: "http://taiwan.yunzanet.com/api/common/upload", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {},
          header: {
            token: uni.getStorageSync("token"),
          },
          success: (res) => {
            setTimeout(() => {
              resolve(res.data);
            }, 1000);
          },
        });
      });
    },
  },
};
</script>

打印fileList1 

默认

自定义内容 点击即可上传