Custom Upload 自定义上传

演示

包含增删查改,即curd所有功能的表格

基础上传

<template>
  <div class="w-full h-full flex flex-col">
    <np-custom-upload
      :headers="{
        Authorization: `eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiYTY4ZTUxYWU3MjE1NDQ2MWE1NWY3ZWEyZDgzNWIzMzAiLCJyb2xlIjoyMCwiZXhwIjoxNzE3NDcxMjc2fQ.RCSSuYteYZNBLRgY4yoPPu4VrsVGsVp4GIy23imaI58`,
      }"
      action="http://localhost:14514/api/v1/basic/upload-file"
      v-model:value="files"
      type="text"
      :is-error-state="
        (res) => {
          if (res.code !== 200) {
            console.error(res);
            return true;
          } else {
            return false;
          }
        }
      "
      multiple
    ></np-custom-upload>

    <div class="mt-4">
      <p>{{ files }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { NpCustomUpload } from '@naive-potato-ui/ui';
import { ref } from 'vue';

const files = ref();
</script>

<style scoped></style>

API

Props

• *valueUploadFileInfo[]:当前上传的文件列表
• labelstring:上传按钮的文字
• acceptstring:接受上传的文件类型
• actionstring:上传的地址
• headersRecord<string, string>:上传的请求头部
• extraDataRecord<string, string>:上传的额外参数
• disabledboolean:是否禁用
• type'text' | 'image' | 'image-card':上传按钮的类型
• maxnumber:最大上传数量
• multipleboolean:是否支持多选文件

Name	Type	Default	Description
value必须	UploadFileInfo[]	-	当前上传的文件列表
label	string	''	上传按钮的文字
accept	string	''	接受上传的文件类型
action	string	''	上传的地址
headers	Record<string, string>	{}	上传的请求头部
extraData	Record<string, string>	{}	上传的额外参数
disabled	boolean	false	是否禁用
type	'text' | 'image' | 'image-card'	text	上传按钮的类型
max	number	-	最大上传数量
multiple	boolean	-	是否支持多选文件