项目基础架构：element-plus 上进行开发的文件管理插件

所用技术栈：

• element-plus 2.4.4+
• Vue 3
• axios
• html2canvas
• less
• unocss

已支持功能清单：

• 支持文件分组 删除 移动 批量删除 添加水印
• 上传资源组件隔离，可拖动上传
• 添加水印功能

注意该组件与业务绑定 需要注意以下参数：

• json.ts 文件是数据模拟
• data.ts 为数据和接口方法隔离

运行效果截图如下，您觉得帮到了你，别忘记小星星：

使用步骤如下：

<script setup lang="ts">
import 'file-operate-ui/index.css'
const typeObj = {
    label: '图片',
    name: 'images',
    choice_type: 'image/gif, image/jpg, image/png, image/jpeg, image/svg, image/svg+xml',
    remarkStr:
      '支持上传25MB以内的jpg、jpeg、png、gif、bmp格式图片，图像长度、宽度<3万像素和长宽像素相乘<2.5亿像素，一次最多上传10个文件'
  }
</script>

<template>
   <div style="width: 1200px;display: flex;">
      <FileOperate    :typeobj="typeObj"/>
   </div>
</template>

代码中注意以下几：

1、file-operate-ui/index.css 为样式，不导入会出现样式问题，由于vite和rollup打包特性

2、文件类型的有如下 :

文件的可选择类型：

图片

 {
    label: '图片',
    name: 'images',
    choice_type: 'image/gif, image/jpg, image/png, image/jpeg, image/svg, image/svg+xml',
    remarkStr:
      '支持上传25MB以内的jpg、jpeg、png、gif、bmp格式图片，图像长度、宽度<3万像素和长宽像素相乘<2.5亿像素，一次最多上传10个文件'
  }

音频

  {
    label: '音频',
    name: 'audio',
    choice_type: 'audio/x-m4a, audio/mp3, audio/acc, audio/mpeg',
    remarkStr: '支持上传500MB以内的m4a、mp3,acc格式音频，一次最多上传10个文件'
  }

视频

{
  label: '视频',
  name: 'video',
  choice_type:
    'video/mp4,video/avi,video/wmv,video/mov,video/flv,video/rmvb,video/mkv,video/webm',
  remarkStr:
    '支持上传5GB以内的mp4、avi、wmv、mov、flv、rmvb、mkv、webm格式视频，一次最多上传10个文件,当前版本最大支持1080高清转码'
}

表格

  {
    label: '表格',
    name: 'excel',
    choice_type:
      'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  }

文档

  {
    label: '文档',
    name: 'word',
    choice_type:
      'application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document ',
    remarkStr: '支持上传1G以内，一次最多上传10个文件'
  }

ppt

  {
    label: 'PPT',
    name: 'ppt',
    choice_type:
      'application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation',
    remarkStr: '支持上传1G以内，一次最多上传10个文件'
  }

pdf

{
 label: 'PDF',
 name: 'pdf',
 choice_type: 'application/pdf',
 remarkStr: '支持上传1G以内，一次最多上传10个文件'
}

如果有任何问题，可以联系我

我的微信

我的whatsAPP

我的飞机（Telegram）

Facebook 联系方式

• Facebook -别忘记点赞加关注