应用场景

分类上传材料附件

与普通的材料附件上传组件不同的是，此组件支持大文件上传，速度更快，效率更高

使用方法

cnpm install rview-c --save

使用组件

<style lang="less">
 .materials-demo .ivu-table i {
  color: darkgray !important;
}
</style>
<style scoped>
</style>
<template>
  <div style="margin-top: 50px;margin-left: 50px;margin-right: 50px;" class="materials-demo">
    <UploadLargeFile
      ref="uploadMaterials"
      :dataList="dataList"
      :tenantId="tenantId"
      :multiple="multiple"
      :uploadUrl="uploadUrl"
      :maxSize="maxSize"
      :DeleteUploadFun="DeleteUpload"
      :PreviewUploadFun="PreviewUpload" 
      :downloadUrl="downloadUrl"
      :downloadById="downloadById"
      :addOrEdit="addOrEdit"
      :isView="isView"
      :isDownload="isDownload"
      @handle-save="handleSave"
      @receive-url="receiveUrl"
      @return-download-name="returnDownloadName"
      :UploadFilesFun="UploadFiles"
      :WebuploaderFun="Webuploader"
      :CreateCodeFun="CreateCode"
      :MD5CheckFun="MD5Check"
    ></UploadLargeFile>
    <div style="margin-top: 95px;text-align:center;">
      <Button type="primary" @click="handleSubmit">业务保存按钮</Button>
      <Button type="primary" @click="getDetail">TEst</Button>
      <Button type="primary" @click="handleCancel">业务取消按钮</Button>
    </div>
  </div>
</template>
<script>
import "swiper/dist/css/swiper.css";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import "photo-sphere-viewer/dist/photo-sphere-viewer";
import { DownloadUrl } from "../../../../config/data";
import { DownloadById } from "../../../../config/data";
export default {
  data() {
    return {
      /**
       * 租户Id
       * String
       * 必传
       */
      tenantId: "0fd2d661-c662-4442-9ec2-491b84a0a237",

      /**
       * 列表展示数据
       * Array
       * 必传
       */
      dataList: [],

      /**
       * 上传路由
       * String
       * 必传
       */
      uploadUrl:
        "http://192.168.199.40:8014/api/services/File/FileDo/UploadFiles_Form",

      /**
       * 文件大小,单位kb
       * Number
       * 必传
       */
      maxSize: 1024000000,

      /**
       * 新增还是编辑
       * Boolean
       * 必传
       */
      addOrEdit: false,

      /**
       * 下载URl
       * String
       * 必传
       */
      downloadUrl: DownloadUrl,

      /**
       * 单个下载URL
       */
      downloadById: DownloadById,

      /**
       * 是否支持多选文件
       * Boolean
       * 不必传，默认false
       */
      multiple: true,

      /**
       * 是否是查看
       * Boolean
       * 不必传，默认false
       */
      isView: false,

      /**
       * 下载功能是否返回url
       * Boolean
       * 不必传，默认false
       */
      isDownload: false
    };
  },
  methods: {
    /**
     * 获取详情
     */
    getDetail() {
      // 新增
      // this.dataList = [
      //   {
      //     id: "id1", // 材料id
      //     name: "申请材料", //  材料名称
      //     num: 0, //  数量
      //     isRequired: true, // 是否必传
      //     attachList: [] // 附件
      //   },
      //   {
      //     id: "id2",
      //     name: "第二种",
      //     num: 0,
      //     isRequired: false,
      //     attachList: []
      //   },
      //   {
      //     id: "id3",
      //     name: "第三种材料",
      //     num: 0,
      //     isRequired: true,
      //     attachList: []
      //   }
      // ];

      // 编辑
      this.dataList = [
        {
          id: "id1",
          name: "支持类型",
          num: 9,
          isRequired: true,
          format: [ "pdf", "jpg", "jpeg", "png","jfif","gif","docx", "xlsx", "doc", "xls", "txt", "dwg","mp4","avi","webm"],
          attachList: [
            {
              code:"20191202000025a9Nt",
              name: "20160329125103_w3B4G.jpeg",
              id: "63d943f4-f869-4c51-8bed-4396b0b92d7d",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/20160329125103_w3B4G_191202095542214.jpeg"
            },
            {
              code:"2019120400007SpIPM",
              name: "落霞.gif",
              id: "220b1b64-17bf-447c-919b-afd460c20bc1",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/落霞_191204104855468.gif"
            },
            {
              code:"20191202000025a9Nt",
              name: "会议纪要模板.docx",
              id: "d75444ce-8021-4f09-9a80-3d2934bcfc1c",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/会议纪要模板_191202095543918.docx"
            },
            {
              code:"20191202000025a9Nt",
              name: "各项目考核标准.xlsx",
              id: "a6567d97-35ea-4335-bcb7-1816f7494552",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/各项目考核标准_191202095547728.xlsx"
            },
            {
              code:"20191202000057Hae1",
              name: "国防工程运行维护指挥系统需求规格说明书.doc",
              id: "eb60fdb1-7de1-472f-8fea-b0f9a48d70b8",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/国防工程运行维护指挥系统需求规格说明书_191202113325495.doc"
            },
            {
              code:"20191202000057Hae1",
              name: "11月4日-11月8日 .xls",
              id: "ec7a526e-65d4-450e-b8be-c472fdf71232",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/11月4日-11月8日 _191204104855512.xls"
            },
            {
              code:"2019120200006T7KIB",
              name: "书房.dwg",
              id: "7510e1b3-f7f9-406c-8d17-fd7c419c6fae",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/书房_191202134359457.dwg"
            },
            {
              code:"2019121900002oLzYV",
              name: "测试.mp4",
              id: "953e923f-fdad-4267-bb80-c73ff9e6b30c",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/测试_191219170426849.mp4"
            },
            {
              code:"2019122300003lGoOf",
              name: "测3.webm",
              id: "60b22868-2e41-4074-82f7-3aada4b83f53",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/测3_191223095934743.webm"
            },
          ]
        },
        {
          id: "id3",
          name: "第三种材料",
          num: 1,
          isRequired: false,
          format: ["docx", "xlsx", "pdf","mp4", "zip"],
          attachList: [
            {
              code:"2019121900002oLzYV",
              name: "测试.mp4",
              id: "953e923f-fdad-4267-bb80-c73ff9e6b30c",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/测试_191219170426849.mp4"
            },
          ]
        },
        {
          id: "id4",
          name: "全景图",
          num: 2,
          isRequired: true,
          format: ["jpg", "xlsx", "pdf"],
          attachList: [
            {
              code: "2019120400024YobhV",
              id: "61dc2992-a687-4320-8e41-2987111f5d15",
              name: "防空地下室1.jpg",
              path:
                "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//全景图/v1/防空地下室1_191204153350800.jpg"
            },
            {
              code: "2019120400024YobhV",
              id: "adfee76f-3c82-4609-b6f9-25143eb6bf42",
              name: "航拍.jpg",
              path:
                "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//全景图/v1/航拍_191204153351784.jpg"
            }
          ]
        },
        {
          id: "id6",
          name: "规划材料",
          num: 1,
          isRequired: true,
          format: ["docx", "xlsx", "pdf"],
          attachList: [
            {
              code: "2019110400008n2NUj",
              id: "43f20277-b08a-4cda-b828-ab14258f2e66",
              name: "移动终端.docx",
              path:
                "192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//规划材料/v1/移动终端_191104134548399.docx"
            }
          ]
        }
      ];
      this.addOrEdit = true;
    },
    handleSubmit() {
      console.log("点击保存");
      this.$refs.uploadMaterials.uploadFun();
    },
    handleSave(resData) {
      console.log("附件上传返回的数据是", resData);
      console.log("在此处调用业务接口");
      this.$refs.uploadMaterials.resetFun();

      Object.keys(resData).forEach((key) => {
        let index = this.dataList.findIndex(obj => obj.id == key);
        this.dataList[index].attachList = resData[key];
      })
      this.dataList.forEach((item) => {
        item.num = item.attachList.length;
        item.attachList.forEach((ele) => {
          ele.name = ele.name || ele.oldFileName;
        })
      })
      this.$refs.uploadMaterials.getTableData();

    },
    handleCancel() {
      this.$refs.uploadMaterials.resetFun();
    },


    /**
     * 接收downloadUrl
     */
    receiveUrl(url) {
      console.log(url);
    },

    /**
     * 返回下载名称，调用下载功能
     */
    returnDownloadName() {
      let downloadName = "组件rview";
      this.$refs.uploadMaterials.downloadFun(downloadName);
    }
  },
  computed: {

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

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

    /**
     * 大文件上传接口(分片) step1
     * Function
     * 必传
     */
    UploadFiles() {
      return this.$API.Upload.UploadFiles;
    },

    /**
     * 大文件上传接口(分片合并) step2
     * Function
     * 必传
     */
    Webuploader() {
      return this.$API.Upload.Webuploader;
    },

    /**
     * 获取提取码
     */
    CreateCode() {
      return this.$API.Upload.CreateCode;
    },

    /**
     * md5码校验
     */
    MD5Check() {
      return this.$API.Upload.MD5Check;
    }

  },
};
</script>

API

props

methods

computed

支持类型

可上传文件类型（后缀）	可批量下载	可下载	可预览
jpg	√	√	√
jpeg	√	√	√
png	√	√	√
jfif	√	√	√
gif	√	√	√
xlsx	√	√	√
xls	√	√	√
docx	√	√	√
doc	√	√	√
pdf	√	√	√
txt	√	√	×
dwg	√	√	√

接口以及定义的全局变量请查看附件

大文件上传接口以及全局变量.docx