Components · Upload
下载

组件

Upload 上传

文件上传；本地列表用 data-pvs-upload；加 data-pvs-upload-auto + URL 走 XHR（主题/CMS 表单）。PivAdmin SPA 仍用 admin/src/api/pivark/system/upload.ts。

Dropzone

    <div data-pvs-upload-wrap style="max-width:22rem">
  <label class="pvs-upload" data-pvs-upload>
    <span class="pvs-upload__icon" aria-hidden="true">⬆</span>
    <p class="pvs-upload__title">点击或拖拽文件到此处</p>
    <p class="pvs-upload__hint">选文件后下方列表自动追加</p>
    <input class="pvs-upload__input" type="file" multiple />
  </label>
  <ul class="pvs-upload__filelist">
  </ul>
</div>

    Progress row

    进度条 DOM 仍由业务填充；JS 默认只追加文件名与大小。

    • banner.jpg上传中…
    <ul class="pvs-upload__filelist" style="max-width:22rem">
  <li class="pvs-upload__file pvs-upload__file--uploading">
    <span class="pvs-upload__file-name">banner.jpg</span>
    <span class="pvs-upload__file-meta">上传中…</span>
    <div class="pvs-upload__progress">
      <span style="width:65%">
      </span>
    </div>
  </li>
</ul>

    XHR auto upload

    配置 data-pvs-upload-url（如 PivArk /upload/file）+ CSRF meta/属性；触发 pvs-upload:done。

      文档站无后台会话时请求会失败，仅演示 DOM/进度条；生产页须带 CSRF 与登录 Cookie。

      <div data-pvs-upload-wrap style="max-width:22rem">
  <label class="pvs-upload" data-pvs-upload data-pvs-upload-auto data-pvs-upload-url="/upload/file" data-pvs-upload-scene="attachment">
    <p class="pvs-upload__title">选文件即 POST（需后端 + CSRF）</p>
    <input class="pvs-upload__input" type="file" />
  </label>
  <ul class="pvs-upload__filelist">
  </ul>
</div>
<p class="pvs-text-sm pvs-text-muted pvs-mt-2 pvs-m-0">文档站无后台会话时请求会失败，仅演示 DOM/进度条；生产页须带 CSRF 与登录 Cookie。</p>

      数据属性

      类名说明
      data-pvs-upload初始化拖拽 + 列表
      data-pvs-upload-auto选文件后自动 XHR
      data-pvs-upload-urlPOST 地址（相对后台 API 根）
      data-pvs-upload-scenePivArk scene 字段（可选）
      data-pvs-upload-csrf-*或 meta pvs-csrf-field/token
      pvs-upload:done / :errorXHR 结果事件
      PivCss.uploadFile()编程式上传 API

      类名速查

      类名说明
      pvs-upload拖拽区（需 data-pvs-upload）
      pvs-upload__filelist / __file已选文件列表
      pvs-upload__progressXHR 进度条
      data-pvs-upload-auto自动 POST
      PivAdminupload.ts · 去重/分片 · 不用 pivcss.js