使用场景

上传文件

图例

使用方法

 cnpm install rview-c --save

使用组件

<template>
        <UploadFile
      ref="uploadFiles"
      :format="format"
      :maxSize="maxSize"
      :uploadUrl="uploadUrl"
      :tenantId="tenantId"
      :folder="folder"
      :idsList="idsList"
      @handle-save="handleSave"
      :FileUploadFun="FileUpload"
      :DeleteUploadFun="DeleteUpload"
      :PreviewUploadFun="previewUpload"
      :isView="isView"
    ></UploadFile>
</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";
export default {
  data() {
    return {
      /**
       * 上传组件相关参数
       */
      /**
       * 上传地址
       */
      uploadUrl: `http://192.168.199.203:8030/api/services/File/FileDo/UploadFiles_Form`,

      /**
       * 文件格式
       */
      format: ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf"],
      /**
       * 文件大小限制，单位kb
       */
      maxSize: 10240,
      tenantId: "bc2718cb-3274-4fa6-873a-055a9a7189eb",
      folder: "ZJK",
      idsList: [],
      isRequired: true,
      isView: false,
      dataList: []，
    };
  },
  computed:{
    FileUpload() {
        return this.$api.Upload.FileUpload
      },
    DeleteUpload() {
      return this.$api.Upload.DeleteUploadPortrait
    },
    previewUpload() {
      return this.$api.Upload.FilePreview
    }
  },
  methods: {
    /**
     * 点击确定保存
     */
    async saveFun(interfaceParam) {
      // 表单验证
      let valid = await this.$refs.formValidate.validate();

      if (valid) {
        this.submitLoading = true;
        this.$refs.uploadFiles.uploadFun();  // 调用组件的上传功能
      } else {
        this.submitLoading = false;
        this.$Message.error("表单验证失败!");
      }
    },

    handleSave(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("没有上传东西，继续执行业务")
      }
      // 组合数据准备新增或修改
    },
    /**
     * 取消操作
     */
    cancleFun() {
      this.$refs["formValidate"].resetFields();
      this.$refs.uploadFiles.resetFun();
      this.$emit("RefreshParent");
    }
  }
};
</script>

API

props

支持类型

doc,docx,xls,xlsx,ppt,pptx,pdf,jpg,jpeg,png,jfif,gif

备注

样式待优化