devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue3封装Upload（文件上传/文件预览）组件_vue upload组件

作者：你好赵伟 | 2024-08-18 03:25:34

赞

踩

vue upload组件

本人23应届菜鸟，2月份入职一直工作到现在，工作时间也半年了，记录一下成长过程。

由于公司前端使用的是Vue3+Ts+AntdVue封装的Vben-Admin框架，只需看源码，就可分析处理整个的Form表单引用流程，封装只需根据业务需求实现就好。下面就由这两部分组成本文章。效果图：

组件整体结构

  • 一个Upload组件右边一个span标签，下面是for循环渲染出来的列表
  • 由a标签和三个按钮组成
  • a标签显示文件名支持点击预览，也可以点击按钮预览
  • 预览是打开一个新的Model（FilePreviewModal）目前仅支持图片、音视频
  • 实现思路是下载文件到浏览器创建一个Blob对象，src指向这个对象的内存地址
  • 上传和下载以及删除就是发送请求调用oss的Api

组件参数说明（对应组件属性）

  • 文件长度（fileLength）：如只需要上传一个文件，通过参数设置上传文件会替换当前文件，如果是多个文件则会替换最早上传的文件
  • 隐藏关键操作按钮（showOperate）：true/false
  • 提示信息（uploadPrompt）：字符串
  • 文件保存格式（value）：格式为：（oss存储中的名称:文件实际名称）/分割，代表多个
  • 上传前调用方法（beforeUpload）：用于校验文件，上传之前调用
  • 上传下载删除接口需要自行修改，不支持传参形式，文章最后放出代码
  • 其他属性也支持Antd的Upload组件

由于本人对前端技术了解有限，目前只可以模仿前辈代码，才可以把需求实现的差不多，而且其中很多底层意义不了解，这也是我写这篇文章的原因，来加深学习。

技术细节

一、框架中的引用

在VbenAdmin中Form封装成了FormSchema[]数组形式的，代码如下

  1.     {
  2.       field: 'field2',
  3.       component: 'Input',
  4.       label: '字段2',
  5.       colProps: { span: 8 },
  6.     },
  7.     {
  8.       field: 'field3',
  9.       component: 'Select',
  10.       label: '字段3',
  11.       colProps: { span: 8 },
  12.     },

从代码结构中可以看出Input就是一个输入框，Select是一个下拉框。而且框架文档中也给出了自定义组件的方法，具体请看官方文档https://doc.vvbin.cn/components/form.html根据文档中的方法修改后即可直接使用组件名称引入

  1. // 在 src/components/Form/src/componentMap.ts 内，添加需要的组件，并在上方 ComponentType 添加相应的类型 key
  2. componentMap.set('componentName', 组件);
  3.  
  4. // ComponentType
  5. export type ComponentType = xxxx | 'componentName';

这一步最简单，但是实现需要先写出来自定义组件，最终自定义组件代码如下：

  1.  {
  2.     field: 'filed',
  3.     label: '附件',
  4.     component: 'UploadFile',
  5.     componentProps: () => {
  6.       return {
  7.         uploadPrompt:
  8.           '单个文件不超过20M，文件必须为.mp3或.wav格式文件，且文件命名为：XXXXXXXX',
  9.         fileLength: 5,
  10.         multiple: true,
  11.         beforeUpload: (file) => beforeUploadMedia(file),
  12.       };
  13.     },
  14.   }

二、封装Upload组件

首先业务需求是支持批量上传、支持文件预览、支持文件下载、支持文件长度限制、显示提示信息，根据以上Upload组件Html代码如下：

  1. <template>
  2.   <Upload
  3.     v-bind="getBindValue"
  4.     v-if="showOperate"
  5.     name="file"
  6.     :showUploadList="false"
  7.     :beforeUpload="(file, fileList) => beforeUpload(file, fileList)"
  8.     :customRequest="(file) => handleUpload(file)"
  9.     v-model:value="state"
  10.     @change="handleChange"
  11.   >
  12.     <div>
  13.       <a-button type="primary">
  14.         <UploadOutlined />
  15.         选择文件
  16.       </a-button>
  17.     </div>
  18.   </Upload>
  19.   <span class="tip" v-if="uploadPrompt">{{ uploadPrompt }}</span>
  20.   <div v-for="(item, index) in fileList" :key="index">
  21.     <div class="button-container">
  22.       <div :class="{ 'disabled-div': disabled }">
  23.         <a @click="handlePreview(item)" :class="{ 'disabled-click': disabled }">
  24.           {{ item.name }}
  25.         </a>
  26.       </div>
  27.       <a-button type="link" @click="handlePreview(item)" :disabled="disabled">预览</a-button>
  28.       <a-button type="link" @click="downLoadFile(item)">下载</a-button>
  29.       <a-button type="link" @click="removeFile(index)" v-if="showOperate">删除</a-button>
  30.     </div>
  31.   </div>
  32.   <FilePreviewModal @register="registerFilePreviewModal" />
  33. </template>
  34. <style lang="less" scoped>
  35.   .disabled-click {
  36.     pointer-events: none;
  37.   }
  38.  
  39.   .disabled-div {
  40.     cursor: not-allowed;
  41.   }
  42.  
  43.   .tip {
  44.     display: inline;
  45.     margin-left: 10px;
  46.     color: #fc6c54;
  47.   }
  48.  
  49.   .button-container {
  50.     display: flex;
  51.     align-items: center;
  52.     justify-content: space-around;
  53.     width: 100%;
  54.     border-bottom: 1px solid #d9ebf8;
  55.  
  56.     div {
  57.       padding: 0 10px;
  58.       border-radius: 5px;
  59.       color: #0464cc;
  60.     }
  61.  
  62.     & > div:nth-child(1) {
  63.       flex: 1;
  64.       margin-left: 0;
  65.       overflow: hidden;
  66.       text-overflow: ellipsis;
  67.       white-space: nowrap;
  68.     }
  69.   }
  70. </style>

Upload的Script代码如下：

  1.  
  2. <script lang="ts">
  3.   import { Upload, message } from 'ant-design-vue';
  4.   import { defineComponent, ref, computed, unref, watchEffect, PropType } from 'vue';
  5.   import { UploadOutlined } from '@ant-design/icons-vue';
  6.   import { useModal } from '/@/components/Modal';
  7.   import FilePreviewModal from './components/FilePreviewModal.vue';
  8.   import { uploadFile, downloadFiles, deleteFile, downloadFilesThen } from './upload.api';
  9.   import { useAttrs } from '@vben/hooks';
  10.   import { FileItem, getObjName, setFileType } from '@/utils/upload';
  11.   import { useMessage } from '/@/hooks/web/useMessage';
  12.   import { useRuleFormItem } from '/@/hooks/component/useFormItem';
  13.   import { useI18n } from '/@/hooks/web/useI18n';
  14.  
  15.   export default defineComponent({
  16.     name: 'UploadFile',
  17.     components: { FilePreviewModal, UploadOutlined, Upload },
  18.     props: {
  19.       showOperate: { type: Boolean, default: true }, // 是否显示上传和删除按钮
  20.       fileLength: { type: Number, default: 20 }, // 最大上传文件个数
  21.       value: { type: String, default: '' }, // 绑定的文件字符串：以/分割
  22.       uploadPrompt: { type: String }, // 上传提示
  23.       beforeUpload: { type: Function as PropType<(...args) => any>, default: null }, // 上传前调用方法
  24.     },
  25.     emits: ['change'],
  26.     setup(props, { emit }) {
  27.       const attrs = useAttrs();
  28.       const { t } = useI18n();
  29.       const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
  30.       const [registerFilePreviewModal, { openModal: openFilePreviewModal }] = useModal();
  31.       const { createConfirm } = useMessage();
  32.  
  33.       const fileList = ref<FileItem[]>([]);
  34.  
  35.       const disabled = ref(false);
  36.  
  37.       /**
  38.        * 我的理解是：校验表单项以及在FormSchema中直接使用需要添加（必要）
  39.        * 第一个参数为组件暴露的参数
  40.        * 第二个参数为组件和Form项绑定的值
  41.        * 第三个参数为什么时候校验
  42.        */
  43.       const [state] = useRuleFormItem(props, 'value', 'change');
  44.  
  45.       // 监听属性值改变，只要改变就执行以下代码
  46.       watchEffect(() => {
  47.         const { value } = props;
  48.         if (value) {
  49.           const list = value.split('/');
  50.           fileList.value = [];
  51.           list.map((item) => {
  52.             if (item) {
  53.               fileList.value.push({ name: item.split(':')[1], fileName: item });
  54.             }
  55.           });
  56.         } else {
  57.           fileList.value = [];
  58.         }
  59.       });
  60.  
  61.       // 更新value的值
  62.       const updatePropByFileValue = async () => {
  63.         let file = '';
  64.         fileList.value.map((item) => {
  65.           if (item.fileName != 'undefined') file += item.fileName + '/';
  66.         });
  67.         emit('change', file.substring(0, file.length - 1));
  68.       };
  69.  
  70.       // 判断文件长度和属性长度
  71.       const vaildFileListLength = async () => {
  72.         const length = fileList.value.length;
  73.         if (length > props.fileLength) {
  74.           for (let i = 0; i <= length - props.fileLength; i++) {
  75.             deleteFile(getObjName(fileList.value[0].fileName));
  76.             fileList.value.splice(0, 1);
  77.           }
  78.         } else if (length === props.fileLength) {
  79.           deleteFile(getObjName(fileList.value[0].fileName));
  80.           fileList.value.splice(0, 1);
  81.         }
  82.         await updatePropByFileValue();
  83.       };
  84.  
  85.       const handlePreview = async (fileItem) => {
  86.         disabled.value = true;
  87.         try {
  88.           fileItem.type = setFileType(fileItem.name);
  89.           if (!['audio', 'img', 'video'].includes(fileItem.type)) {
  90.             message.info('当前文件暂不支持预览，请下载后查看');
  91.             return;
  92.           }
  93.           
  94.           /**
  95.            * const downloadFilesThen = async (fileName: string) => {
  96.            * const data = await defHttp.request(
  97.            *      { url: Api.downloadFile + '/' + getObjName(fileName), method: 'GET', responseType: 'blob' },
  98.            *      { isTransformResponse: false },
  99.            *      ).catch((error) => {
  100.            *        console.log(error);
  101.            *      });
  102.            * const blobURL = window.URL.createObjectURL(new Blob([data]));
  103.            * return blobURL;
  104.            * };
  105.            */
  106.           const res = await downloadFilesThen(fileItem.fileName);
  107.  
  108.           fileItem.url = res;
  109.           openFilePreviewModal(true, fileItem);
  110.         } finally {
  111.           disabled.value = false;
  112.         }
  113.       };
  114.  
  115.       const removeFile = (index) => {
  116.         createConfirm({
  117.           title: '是否确认删除文件？',
  118.           content: '删除后请及时保存或提交，否则文件不可查看。',
  119.           onOk: () => {
  120.             // 自定义删除接口 如：const deleteFile = (objName: string) => defHttp.get({ url: '/file/delete' + '/' + objName });
  121.             deleteFile(getObjName(fileList.value[index].fileName));
  122.             fileList.value.splice(index, 1);
  123.             updatePropByFileValue();
  124.             message.success('删除成功');
  125.           },
  126.         });
  127.       };
  128.  
  129.       const downLoadFile = (item) => {
  130.         /**
  131.          * 自定义下载接口
  132.          * const downloadFiles = (params?: Recordable) => {
  133.          *        downloadFile({
  134.          *          url: Api.downloadFile + '/' + getObjName(params?.fileName),
  135.          *          fileName: getFileName(params?.name),
  136.          *          fileSuffix: '.' + getFileSuffix(params?.fileName),
  137.          *         });
  138.          *        };
  139.          */
  140.         downloadFiles({ name: item.name, fileName: item.fileName });
  141.       };
  142.  
  143.       const handleUpload = async (files) => {
  144.         if (files) {
  145.           files.filename = files.file.name;
  146.            // 自定义上传接口 如：const uploadFile = (params: any) => defHttp.uploadFile({ url: '/file/upload' }, params);
  147.           const res = await uploadFile(files);
  148.           await vaildFileListLength();
  149.           let { value } = props;
  150.           if (value) {
  151.             value += '/' + res;
  152.           } else {
  153.             value = res;
  154.           }
  155.           emit('change', value);
  156.           message.success('上传成功');
  157.         }
  158.       };
  159.  
  160.       // 组件更改时执行
  161.       function handleChange() {
  162.         let { value } = props;
  163.         emit('change', value);
  164.       }
  165.  
  166.       return {
  167.         t,
  168.         attrs,
  169.         state,
  170.         handleChange,
  171.         registerFilePreviewModal,
  172.         disabled,
  173.         handlePreview,
  174.         fileList,
  175.         downLoadFile,
  176.         getBindValue,
  177.         removeFile,
  178.         handleUpload,
  179.       };
  180.     },
  181.   });
  182. </script>

文件预览FilePreviewModal组件的Html代码如下：

  1. <template>
  2.   <BasicModal
  3.     v-bind="$attrs"
  4.     :title="title"
  5.     :width="1200"
  6.     :minHeight="height"
  7.     :maskClosable="false"
  8.     @register="registerModal"
  9.     :footer="null"
  10.     :centered="true"
  11.     :destroyOnClose="true"
  12.   >
  13.     <div class="file-container">
  14.       <Image v-if="fileObj.type === 'img'" :src="fileObj.url" />
  15.       <audio ref="audio" v-if="fileObj.type === 'audio'" controls :src="fileObj.url"></audio>
  16.       <video ref="video" v-if="fileObj.type === 'video'" controls :src="fileObj.url"></video>
  17.     </div>
  18.   </BasicModal>
  19. </template>
  20. <style lang="less" scoped>
  21.   .file-container {
  22.     align-items: center;
  23.     font-size: 0;
  24.     line-height: 1;
  25.  
  26.     audio {
  27.       width: 100%;
  28.     }
  29.  
  30.     video {
  31.       width: 100%;
  32.     }
  33.  
  34.     img {
  35.       width: 100%;
  36.     }
  37.   }
  38. </style>

FilePreviewModal Script代码如下：

  1.  
  2. <script lang="ts" setup>
  3.   import { ref } from 'vue';
  4.   import { Image } from 'ant-design-vue';
  5.   import { BasicModal, useModalInner } from '/@/components/Modal';
  6.  
  7.   const title = ref('');
  8.   const height = ref(50);
  9.   const fileObj = {
  10.     type: '',
  11.     url: '',
  12.     fileName: '',
  13.   };
  14.  
  15.   const [registerModal] = useModalInner(async (data) => {
  16.     title.value = '文件预览：' + data.name;
  17.     fileObj.type = data.type;
  18.     fileObj.fileName = data.fileName;
  19.     fileObj.url = data.url;
  20.     if (fileObj.type === 'img') {
  21.       height.value = 700;
  22.     }
  23.     if (fileObj.type === 'audio') {
  24.       height.value = 20;
  25.     }
  26.     if (fileObj.type === 'video') {
  27.       height.value = 20;
  28.     }
  29.   });
  30. </script>

小结

第一次封装前端组件遇到很多不懂的地方，但也是提升自己的一种方法。

本片文章到此就结束啦，第一次写请多多包涵呀，不清楚的请评论或者私信哦。

下一篇准备前后端集成SocketIO，感兴趣的一键三连哦！

公众号同时发布，请搜索：PCode进阶。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/995768
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号