使用场景

上传文件(先业务后文件）

图例

新增：

编辑：  

查看：

样式在项目中自行修改

使用方法

 cnpm install rview-c --save

使用组件

<template>
  <div class="div_shell">
    <HNUploadFile
      ref="uploadFiles"
      :format="format"
      :maxSize="maxSize"
      :tenantId="tenantId"
      :folder="folder"
      :belongsId="belongsId"
      :isView="isView"
      :FileUploadFun="FileUpload"
      :DeleteUploadFun="DeleteUpload"
      :PreviewUploadFun="PreviewUpload"
      :GetFileFun="GetFile"
      @handle-success="handleSuccess"
      @handle-failed="handleFailed" @valid-error="validError"
    ></HNUploadFile>
  </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";
export default {
  data() {
    return {
      format: ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt"],
      maxSize: 5,
      tenantId: "bc2718cb-3274-4fa6-873a-055a9a7189eb",
      folder: "hn-ZJK",
      isRequired: true,
      isView: false,
      belongsId: ""
    };
  },
  methods: {
    /**
     * 点击查看
     */
    getDetail() {
      this.isView = true;
      this.belongsId = "f1c20b1e-279a-4675-bea3-08971117cd65";
    },
    /**
     * 点击保存业务数据，成功后调用组件的上传方法
     */
    handleSubmit() {
      // 表单验证通过，调用接口,拿到业务数据的id，调用文件上传的方法
      let id = "f1c20b1e-279a-4675-bea3-08971117cd65";
      this.$refs.uploadFiles.uploadFun(id);
    },

    /**
     * 验证失败调用的方法
     */
    validError() {
      this.submitLoading = false;
    },
 /**
     * 文件上传成功调用的方法
     */
    handleSuccess(data) {
      // 文件上传成功,请继续往下操作
      console.log('文件上传成功,请继续往下操作');
    },
handleFailed(errInfo) {
      // errInfo  文件上传失败的返回信息
      // 文件上传失败，请继续往下操作
      console.log('文件上传失败，请继续往下操作');
    },
    /**
     * 点击取消
     */
    handleCancel() {
      this.$refs.uploadFiles.resetFun();
    },
  },
  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
    }
  },
  mounted() {
    this.uploadList = this.$refs.uploadFiles.uploadList;
  }
};
</script>

API

props

支持类型

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

注意

1、点击取消时，记得调用组件的resetFun()方法。

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

原因：未引入样式

解决方法：引入样式

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

4、文件相关方法请与本文档的附件    文件相关方法.doc     保持一致

文件相关方法.doc

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

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

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