Common Components
On this page

上传组件 ​

NUpload ​

TIP

NUpload 同 antdv Upload 组件的二次封装, 同 antdv Upload 组件的所有参数/事件/方法/插槽外, 还支持以下参数.

Props ​
参数说明类型可选值默认值必填
... 同 antdv Upload 组件的所有参数............
limit上传文件的限制条件, 用于限制上传文件的大小和宽高. 详见下方说明.NUploadLimit-{}否

NUploadButton ​

NUploadButton 组件以按钮形式上传文件, 不会显示已上传的文件列表, 但会在按钮上显示上传进度. 适用于只上传一个文件的场景.

组件示例

NUploadPictureCard ​

NUploadPictureCard 组件以卡片形式上传图片, 会显示已上传的图片列表, 并支持预览/删除/重新上传等操作. 适用于上传图片的场景.

组件示例

设置全局的上传处理函数 ​

NSpecProvider 组件的 upload 属性可以设置全局的上传处理函数, 该函数会在 NUpload/NUploadButton/NUploadPictureCard 组件的 customRequest 属性未设置时生效.

upload 属性支持以下参数:

参数说明类型默认值
accept上传文件的类型, 同 antdv Upload 组件的 accept 属性string-
action上传的地址, 同 antdv Upload 组件的 action 属性string-
method上传的请求方法, 同 antdv Upload 组件的 method 属性string-
customRequest上传处理函数, 同 antdv Upload 组件的 customRequest 属性(options: UploadRequestOption) => void-
limit上传文件的限制条件, 用于限制上传文件的大小和宽高.NUploadLimit{}

TIP

  • 以上参数都可以被 NUpload/NUploadButton/NUploadPictureCard 组件的同名参数覆盖.
  • 如果需要在上传文件时显示进度条, 需要在 customRequest 函数中调用 options.onProgress 方法.

示例 ​

javascript
const uploadConfig = {
  accept: "image/*",
  action: "xxxx",
  method: "POST",
  customRequest: (options) => {
    const { action, method, file } = options;

    // 上传文件
    try {
      // 上传中
      options.onProgress({ percent: 80 });
      // 上传成功
      options.onSuccess({ url: "" });
    } catch (e) {
      // 上传失败
      options.onError(e);
    }
  }
};
html
<n-spec-provider :upload="uploadConfig">
  <n-upload-button>
    <UploadOutlined />
    点击上传
  </n-upload-button>
</n-spec-provider>