2020-05-08 09:41:49 版本 : HN-上传文件组件(rview-c)
作者: 徐文斌 于 2020年04月14日 发布在分类 / 人防组 / 人防前端 下,并于 2020年05月08日 编辑
 历史版本
修改日期 修改人 备注
2020-05-18 15:54:54[当前版本] 徐文斌 完善使用组件的注意点
2020-05-18 15:04:11 徐文斌 "version": "1.1.158"
2020-05-08 09:41:49 徐文斌 添加拓展字段expandField
2020-04-14 11:08:31 徐文斌 删除不必要注释

使用场景

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

图例

新增：粘贴图片

编辑：粘贴图片  

查看：粘贴图片

样式在项目中自行修改

使用方法

 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"
    ></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);
    },

    /**
     * 文件上传成功调用的方法
     */
    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

参数     类型 是否必填 描述 默认值
btnText string 否 按钮名称 上传文件
format array 是 文件格式 --
maxSize number 是 文件大小，单位M --
tenantId
 string 是 租户ID --
folder string 否 上传时存在库里的文件夹名称 File
belongsId string 是 业务数据id,新增时传空'' --
isRequired boolean 否 是否验证文件必传 true
isView boolean 否 是不是查看 false
expandField string 否 拓展字段，可给文件添加标志 --
methods
方法名 参数 描述
handle-success
自定义参数名称 文件上传成功，自定义参数名称表示文件上传成功的返回信息（文件信息）
handle-failed 自定义参数名称 文件上传失败，自定义参数表示文件上传失败的返回信息。

computed
方法名 参数 描述

FileUploadFun

 无 
 文件上传接口   
DeleteUploadFun
无 
 文件删除接口 
PreviewUploadFun   
 无 
 文件预览接口   
GetFileFun 无 获取文件信息的接口

支持类型

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”;



3、config/index.js文件中注册文件服务网关
   /**
   * 文件网关地址
   */
   fileServerUrl :{
     dev :  'http://192.168.199.203:8099/File ',
     pro :  window. g. fileServerUrl
  },

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



文件相关方法.doc




 附件
附件类型

PNGPNG DOCDOC

历史版本-目录  [回到顶端]
    知识分享平台 -V 4.8.7 -wcp