np-form File Upload

By setting type: 'upload', the file upload component can be used in the form, which is internally built on np-upload.

The v-model value is of type string[], where each item is a JSON string of {name, url, type} by default. When listType is image-card and urlOnly is true, each item only stores the file's url string.

浏览器不支持，请手动复制 upload.en.vue

<template>
  <div>
    {{ data }}
    <np-form v-model="data" :option="option" />
  </div>
</template>
<script setup lang="ts">
import type { FormOption } from 'naive-plus'
import { ref } from 'vue'

const data = ref({})

const option: FormOption = {
  onSubmit: async form => {
    console.log('Submitted', form)
  },
  columns: [
    {
      label: 'Attachment',
      key: 'files',
      type: 'upload',
      props: {
        action: '/api/file/upload',
      },
    },
  ],
}
</script>

Component Configuration

FormColumn Props

Prop	Description	Type	Default
type	Set to 'upload'	string	-
props	NUpload props, passed through to n-upload	NUpload Props	-
urlOnly	Only effective when listType: 'image-card', value is simplified to an array of url strings	boolean	false
defaultValue	Default file list	string[]	-
onChange	File list change event	(value: string[], ctx) => void	-