使用场景

上传，展示一张或多张图片（先业务后文件）

图例

使用方法

 cnpm install rview-c --save

使用组件

<template>
  <div style="margin: 10px 10px">
    <HNUploadImg
    ref="uploadImg"
      :format="format"
      :maxSize="maxSize"
      :tenantId="tenantId"
      :isView="isView"
      :belongsId="belongsId"
      :FileUploadFun="FileUpload"
      :DeleteUploadFun="DeleteUpload"
      :PreviewUploadFun="PreviewUpload"
      :GetFileFun="GetFile"
      @handle-success="handleSuccess"
      @handle-failed="handleFailed"
    ></HNUploadImg>
    <br>
    <br>
    <Button type="primary" @click="handleSubmit" style="margin-bottom: 10px">提交</Button>
    <br>
    <Button type="primary" @click="getDetail" style="margin-bottom: 10px">获取详情</Button>
  </div>
</template>
<script>
export default {
  name: "hn-upload-img",
  data() {
    return {
      format: ['jpg', 'jpeg', 'png'],
      maxSize: 5,
      multiple: true,
      tenantId: "141f3d3c-28b0-4102-8217-b2110169fa88",
      isView: false,
      belongsId: ""  // 业务id
    };
  },
  methods: {

    /**
     * 获取详情
     */
    getDetail() {
      this.isView = false;
      this.belongsId = "d8c8d57d-6296-4547-baf8-3e6ea3cdd605";
    },
    
    /**
     * 点击保存业务数据，成功后调用组件的上传方法
     */
    handleSubmit() {
      let id = "d8c8d57d-6296-4547-baf8-3e6ea3cdd605";
      this.$refs.uploadImg.uploadFun(id);
    },

    /**
     * 文件上传成功调用的方法
     */
    handleSuccess() {
      // 文件上传成功,请继续往下操作
      console.log('文件上传成功,请继续往下操作');
    },
    handleFailed(errInfo) {
      // errInfo  文件上传失败的返回信息
      // 文件上传失败，请继续往下操作
      console.log('文件上传失败，请继续往下操作');
    },


  },
  computed: {
    FileUpload() {
      return this.$API.Upload.FileUpload;
    },
    DeleteUpload() {
      return this.$API.Upload.DeleteUploadPortrait;
    },
    PreviewUpload() {
      return this.$API.Upload.FilePreview;
    },
    GetFile() {
      return this.$API.Upload.FilePage
    }
  }
};
</script>
<style scoped>
</style>

API

props

支持类型

jpg,jpeg,png,jfif,gif