【Naive UI】n-upload上传文件限制类型和数量并获取url注意问题

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

Naive UI（下面直接简写N UI）是真的难用啊，查个内容基本都不怎么查得到，得自己摸索，最难受的还是要自定义样式了吧！为什么前端语言框架类型这么多啊，都用element UI不好吗，真的是无语得很！简直草了！
以下为正文和示例

需求示例

描述：N UI要求实现上传文1个件，且为pdf、txt、doc等格式类型，具体做了这些格式类型：
txt, pdf, doc, docx, xls, xlsx, ppt, pptx
图例：

二、代码示例

1.代码

代码如下（示例）：

<template><n-form ref="formRef":model="formParams":rules="rules"><n-grid :cols="24":x-gap="20"><n-form-item-gi label="文档名称:":span="12" path="fileName"><n-input
                    placeholder="请输入文档名称"
                    clearable
                    maxlength="50"
                    v-model:value="formParams.fileName"
                    v-enter-not-space
                /></n-form-item-gi><n-form-item-gi label="选择文档:":span="24" path="fileLink"><n-upload 
                    v-model:value="formParams.fileLink":max="1"<!-- 限制数量 -->:on-change="handleFileChange"
                    @before-upload="befpreUpload"<!-- 上传前的类型验证 -->><n-button>上传文件</n-button></n-upload></n-form-item-gi></n-grid></n-form></template><script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { useMessage } from 'naive-ui'
    export defaultdefineComponent({
        props:{
            rowData:{ type: Object },},setup(props){const formRef =ref()/**
             * @description 参数
             */const formParams =reactive({
                fileName: props.rowData?.fileName ||'',
                fileLink: props.rowData?.fileLink ||'',})/**
             * @description form表单验证规则
             */const rules =reactive({
                fileName:[{
                        required: true,
                        message:'请输入文档名称!',
                        trigger:['blur'],},],
                fileLink:[{
                        required: true,
                        message:'请选择文档!',
                        trigger:['blur'],},],})const message =useMessage()// 限制文件类型const befpreUpload =(file)=>{//分别为'txt', ''pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'const allowedExtensions =['text/plain','application/pdf','application/msword',
                    'application/vnd.openxmlformats-officedocument.wordprocessingml.document','application/vnd.ms-excel',
                    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','application/vnd.ms-powerpoint',
                    'application/vnd.openxmlformats-officedocument.presentationml.presentation'
                ];const fileExtension = file.file?.type;if(!allowedExtensions.includes(fileExtension)){
                    message.error("只能上传txt, pdf, doc, docx, xls, xlsx, ppt, pptx格式的文件，请重新上传");return false;}return true;}// 处理文件选择变化const handleFileChange =(fileList)=>{// 更新 formParams.fileLink 以确保正确触发验证
                formParams.fileLink = fileList.fileList.length ? fileList.fileList[0].fullPath :'';// formParams.fileLink = fileList.file?.fullPath;//这种方法会导致清空后仍有文件的url，虽然界面上会显示没有文件了，但是如果点击确定的话，就不会触发fileLink的校验了}return{
                formRef,
                formParams,
                rules,
                handleFileChange,
                befpreUpload
            }},})</script>

上述为全部的示例代码

2.限制类型部分

代码如下（示例）：

const message =useMessage()// 限制文件类型const befpreUpload =(file)=>{//分别为'txt', ''pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'const allowedExtensions =['text/plain','application/pdf','application/msword',
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document','application/vnd.ms-excel',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','application/vnd.ms-powerpoint',
        'application/vnd.openxmlformats-officedocument.presentationml.presentation'
     ];const fileExtension = file.file?.type;if(!allowedExtensions.includes(fileExtension)){
         message.error("只能上传txt, pdf, doc, docx, xls, xlsx, ppt, pptx格式的文件，请重新上传");return false;}

该处是部分数据类型对应的校验。【简直草了，后缀特么只有那么点东西，这个B框架非得写一大串破玩意儿，直接像el-ui那种写个txt的不香吗，草】

下面附赠两段查到的el ui的文件类型限制示例：
1.直接在组件el-upload中用accept限制【虽然在官网给了的示例没有看到直接用accept限制的，但是搜到的就有这种写法】：

<el-upload
      accept=".pdf, .doc, .docx, .xls, .xlsx"
      其余略，自己搜去，反正比N UI的东西好搜到多了，一搜一大把
>

2.在JS中搭配el-upload的【:before-upload】使用的示例【也是搜出来的，反正真的简短啊】

const whiteList =["pdf","doc","docx","xls","xlsx"];

对吧，对吧，对吧，el-ui的真的好简短啊！好简洁啊！这特么才是真正的好用的工具啊，N UI什么玩意儿！简直是搞人心态！
这个是搜到的参考链接【待会发了我看看能不能点进去，点不进去的话就复制粘贴这段哇：
https://blog.csdn.net/qq_34707272/article/details/103895176
点进去了当我没说】：
链接: link

3.获取文件URL部分

代码如下（示例）：

// 处理文件选择变化const handleFileChange =(fileList)=>{// 更新 formParams.fileLink 以确保正确触发验证
                formParams.fileLink = fileList.fileList.length ? fileList.fileList[0].fullPath :'';// formParams.fileLink = fileList.file?.fullPath;//这种方法会导致清空后仍有文件的url，虽然界面上会显示没有文件了，但是如果点击确定的话，就不会触发fileLink的校验了}

不信的话请看下方打印结果比较
直接打印获取到的fileList

可以看到获取到的fileList有三个文件，其中含有需要url的在file和fileList中。
接下来打印fileList.file

fileList.file中的fullPath就是需要的文件url，type的话就是上传的文件类型【所以说这个N UI真操蛋并且真难用啊，这个.txt文件你好好写个txt不香吗，非得弄那么大一串，简直草了，一开始怎么都不能通过自己写的验证（txt），然后打印了才知道是这个type里面的内容，这个还算好的了，特么遇到PDF、PPT这些谁特么想得出来啊，草了，无语得很，简直越封装越傻逼，越改进越傻逼！又是怀念秦始皇的一天，啊啊啊啊，为什么他不能直接统一全世界啊，到时候所有的东西都是同一套不香吗！！！尤其是前端给我一直用同一套框架啊啊啊！！！为什么后端一直是java老子现在就得vue3+n ui，就得vue2+el-ui，还得html5+ajax啊啊，草】【好了，刚刚去写上面的type吐槽的了。至于刚刚为什么没有写type吐槽，哦，忘了（划掉），应该要结合具体的打印来说嘛】
再打印出fileList.fileList中的内容【总感觉这个操作已经过去了好久？先去接杯水然后上个厕所再回来接着写，诶嘿】

【没错我回来啦——这个双波浪号为什么会导致缩小啊，，，】
可以看到fileList.fileList中也有这些东西，但是整个fileList.fileList是存在数组中的，所以取出其中的url还得用数组格式，也就是【fileList.fileList[0].fullPath】，而上面的那个fileList.file取出只需要【fileList.file.fullPath】这两种在界面上反应出来的效果其实都没啥区别，这里偷懒直接用同一张图：

但是，当删除后，再点击确定，就是没有上传文件的情况了，问题就来啦！
第一种fileList.file下删除【我擦，系统bug了，我那个错不是不能复现的问题，是那个操作按钮被抠掉了，就突然没了QAQ
哎，算了，去问问吧，不在这里贴图，待会还不是要去解决，可怜的我啊
问了下不是系统的问题，我很怀疑啊，，，怎么可能突然就没那个按钮了呢，我的新增按钮直接给我突然消失了。。。】

【好好好，后端的Redis缓存，草了，，，】
第二种是fileList.fileList[0]下的删除【哈哈哈，没错，我就是先写的这个这个截图】：

是不是很离谱？然后打印一下fileList，就能能看到目前的一个情况：

可以看到如果移除后，打印出来的fileList中，fileList.file仍然是有内容的，并且是被删除的内容【由于这里限制了最大文件1个，所以也不清楚是哪个file的file，应该是当前操作的file的内容，有兴趣自己试试，我刚刚码字压到麻筋了，，，左手好麻，左手小拇指也是，，，】
但是fileList.fileList就为空，所以只有获取fileList.fileList[0]中的fullPath才能得到空的结果，进而进行校验【我擦，左手好麻，现在无名指和中指也是了QAQ，赶紧甩甩】

所以用这段代码进行获取吧~【额，，，还得补上面的错误图例，淦！】

formParams.fileLink = fileList.fileList.length ? fileList.fileList[0].fullPath :'';

总结

算了不写总结了，都拆分了，就这样~【我靠，水了好多字，，，小6k了】