kh-upload

vue3+el-upload 文件上传、文件类型小图标、文档在线预览（img、docx、xlsx、pptx、pdf、video... ）

安装

  npm i kh-upload


  全局注册
  import khUpload from 'kh-upload';
  app.use(khUpload);

  局部注册
  import khUpload from 'kh-upload';
  export default {
    components: {
      khUpload,
    },
  };

使用示例

1、在crud中使用

<template>
  <avue-crud
    :option="option"
    v-model="form"
    :data="data"
    :before-open="beforeOpen"
    :upload-after="uploadAfter"
    :upload-delete="uploadDelete"
    ref="crud"
    @on-load="onLoad"
  >
    <template #file-form="{ disabled, size, column }">
      <kh-upload
        v-model="form.file"
        :upload-after="uploadAfter"
        :upload-delete="uploadDelete"
        :size="size"
        :disabled="disabled"
        :option="column"
      ></kh-upload>
    </template>
  </avue-crud>
</template>

<script>
//引入khUpload组件
import khUpload from 'kh-upload';

export default {
  components: {
    khUpload,
  },
  data() {
    return {
      form: {},
      options: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 3,
        searchSpan: 7,
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        align: 'center',
        searchLabelWidth: 220,
        labelWidth: 160,
        width: 320,
        menuWidth: 240,
        column: [
          {
            label: '文件名称',
            prop: 'name',
            span: 24,
            search: true,
          },
          {
            label: '文件附件',
            prop: 'file',
            type: 'upload',
            listType: 'text,picture,picture-card',
            mutiple: true,
            limit: 10,
            props: {
              label: 'fileName',
              value: 'fileUrl',
            },
            dataType: 'string',
            propsHttp: {
              res: 'data',
              url: 'link',
            },
            action: '/api/blade-resource/oss/endpoint/put-file-attach',
            tip: '上传文件不超过5000kb',
            fileSize: 5000,
            span: 24,
            hide: true,
          },
        ],
      },
      data: [],
    };
  },
  methods: {},
};
</script>

2、单独使用，不依赖其他组件

<template>
  <kh-upload :option="options" v-model="form.file"></kh-upload>
</template>

<script>
//引入khUpload组件
import khUpload from 'kh-upload';

export default {
  components: {
    khUpload,
  },
  data() {
    return {
      form: {
        file: '',
      },
      options: {
        type: 'upload',
        listType: 'text',
        dataType: 'string',
        action: '/blade-resource/oss/endpoint/put-file',
        propsHttp: {
          res: 'data',
          url: 'link',
        },
      },
    };
  },
  methods: {},
};
</script>

属性文档

Props

| 参数 | 说明 | 类型 | 默认值 | | ------ | ------ | ------ | ------ | | option | 配置项 | Object | {} |

option

| 参数 | 说明 | 类型 | 可选值 |

项目依赖的第三方库

• docx、xlsx、pptx、pdf： 基于@vue-office库实现