使用场景

上传，展示一张或多张图片

图例

使用方法

 cnpm install rview-c --save

使用组件

<template>
  <div style="margin: 10px 10px">
    <UploadImg
    ref="uploadImg"
      :format="format"
      :maxSize="maxSize"
      :uploadUrl="uploadUrl"
      :multiple="multiple"
      :tenantId="tenantId"
      :isRequired="isRequired"
      :uploadableQuantity="uploadableQuantity"
      :idsList="idsList"
      :isView="isView"
      :FileUploadFun="FileUpload"
      :DeleteUploadFun="DeleteUpload"
      :PreviewUploadFun="PreviewUpload"
       @handle-save="handleSave" 

    ></UploadImg>
 
        <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: "upload-img",
  data() {
    return {
      uploadUrl: `http://192.168.199.203:8030/api/services/File/FileDo/UploadFiles_Form`,
      format: ['jpg', 'jpeg', 'png'],
      maxSize: 10240,
      multiple: true,
      tenantId: "bc2718cb-3274-4fa6-873a-055a9a7189eb",
      waitUploadList: [],
      uploadableQuantity: 2,
      dataList: [],
      idsList: [],
      isRequired: true,
      isView: false
    };
  },
  methods: {

    /**
     * 获取详情
     */
    getDetail() {
      this.isView = true;
      this.idsList = ["e1bf73b0-170b-44ef-9485-90fc3dc1b982"]; 
    },
    
    /**
     * 提交调用上传方法
     */
    handleSubmit() {
      // 需要提交的话就调用uploadFun()方法,如果不需要提交，请业务自行调用handleSave方法
      this.$refs.uploadImg.uploadFun();
    },

    handleSave(result,state) {

      // result 为上传接口返回的数据
      // state  上传接口是否存在数据
      if (state) {
      this.dataList = [];
      result.forEach((item) => {
        this.dataList.push({
          name: item.name,
          id: item.id,
          path: item.path
        })
      });
      console.log('返回的数据是', this.dataList);
      } else {
        console.log("没有上传东西，继续执行业务");
      }
      
      // 业务接口调用成功，再调组件的清除数据
    // this.$refs.uploadImg.clearFun();
    }
  },
  computed: {
     /**
     * 文件上传接口
     * Function
     * 必传
     */
    FileUpload() {
      return this.$API.Upload.FileUpload;
    },

    /**
     * 文件删除接口
     * Function
     * 必传
     */
    DeleteUpload() {
      return this.$API.Upload.DeleteUploadPortrait;
    },

    /**
     * 文件预览接口
     * Function
     * 必传
     */
    PreviewUpload() {
      return this.$API.Upload.FilePreview;
    },
  }
};
</script>

API

props

支持类型

jpg,jpeg,png,jfif,gif