使用场景

上传文件

图例

使用方法

 cnpm install rview-c --save

使用组件

<RgUploadFile
  ref="uploadFiles"
  :tenantId="tenantId"
  :folder="folder"
  :belongsId="belongsId"
  :isView="isView"
  @handle-success="handleSuccess"
  @handle-failed="handleFailed"
  @valid-error="validError"
  ></RgUploadFile>

<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 {
      /**
       * 上传组件相关
       */
      tenantId: this.$store.state.user.tenantId,
      isView: false,
      belongsId: "", 
    };
  },
  methods: {
    /**
     * 获取详情
     */
    getDetail(id) {
      this.belongsId = "";
      this.$api.PolicyRegulations.DetailData({id}).then(res => {
        this.isView = this.disabled;
        this.belongsId = this.innerInfo.id;
    })     
    },

    /**
     * 点击确定
     */
    async saveFun() {
     // 表单验证
      let valid = await this.$refs.formValidate.validate();
      if (valid) {
        this.submitLoading = true;
        this.$refs.uploadFiles.uploadFun(this.innerInfo.id); // 调用组件的上传方法
      } else {
        this.$Message.error("表单验证失败!");
      }
    },

    /**
     * 文件必填验证失败
     */
    validError() {
      this.submitLoading = false;
    },

    /**
     * 文件上传成功调用的方法
     */
    handleSuccess(data) {
     // 业务执行成功后记得调用组件的重置方法
     this.$refs.uploadFiles.resetFun();
    },
   // 文件上传失败调用的方法
    handleFailed(errInfo) {
      // errInfo  文件上传失败的返回信息
      this.$Message.error("操作失败，请稍后重试!");
    }
  },
  mounted() {
  }
};
</script>

API

props

支持类型

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

注意

1、关闭页面，一定要调用组件的resetFun()方法，清空belongsId。

2、文件预览展示一半，如图

原因：未引入样式

解决方法：引入样式

import “swiper/dist/css/swiper.css”; 
import “photo-sphere-viewer/dist/photo-sphere-viewer.css”; 
import “photo-sphere-viewer/dist/photo-sphere-viewer”;

3、如果附件需要验证必填，一定要传valid-error方法，否则会报错

4、上传成功的handle-success的事件中，一定要调用组件的resetFun()方法，否则有可能出现详情展示两个相同文件的情况

5、获取详情和编辑前，belongsId一定要清空，否则组件不会去调用查看详情的方法