自定义上传图片

1.html

            <a-upload
              name="avatar"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :data="{ isup: 1 }"
              :before-upload="beforeUpload"
              :customRequest="imgBodyupload"
            >
              <img
                style="width: 100px"
                v-if="addForm.deviceUrl"
                :src="addForm.deviceUrl"
                alt="avatar"
              />
              <div v-else>
                <a-icon type="plus" />
                <div class="ant-upload-text">上传图片</div>
              </div>
            </a-upload>

2.data()数据

     addForm: {
        deviceUrl: "",
      },

注：如果不先定义，上传后不显示

3.methods 方法

    // 图片上传前校验
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("图片格式错误，请上传jpg或png格式");
      }
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error("图片大小要小于10MB!");
      }
      return isJpgOrPng && isLt2M;
    },
    // 上传课程封面
    imgBodyupload(file) {
      const formData = new FormData();
      formData.append("Files", file.file);
      formData.append("SavePath", "event/banner");
      this.UploadPictureToRemote(formData);
    },
    // 上传图片
    async UploadPictureToRemote(formData) {
      const res = await this.$api.UploadPictureToRemote(formData);
      if (res.success) {
        this.addForm.deviceUrl = res.response;
        this.$message.success(res.msg);
      } else {
        this.$message.warning(res.msg);
      }
    },