上传功能

文件上传功能，前端提供以下组件，不做特殊说明的都是基于本地上传

后端本地上传

本地上传，专业版基于 Laravel Filesystem 提供两个本地disk，配置如下。这是配置系统内置，可以根据实际需求添加自己的 disk 配置

// config/filesystem.php
[
    'disks' => [
        // 上传目录
        'uploads' => [
            'driver' => 'local',
            'root' => storage_path('uploads'),
            'url' => env('APP_URL').'/uploads',
            'visibility' => 'public',
            'throw' => false,
        ],

        // 静态文件存放目录，不对外开放
        'static' => [
            'driver' => 'local',
            'root' => storage_path('static'),
            'visibility' => 'private',
            'directory_visibility' => 'private',
            'throw' => false,
        ],
    ]
]

前端组件可以使用 props 来决定使用哪个 disk 作为本地处理。下面我们在这里了解下

{
   // 配合后端的 filesysytem 配置
  disk: {
    type: String,
    default: 'uploads'
  },
  // 存储的目录
  path: {
    type: String,
    default: 'attachments'
  }
}

前端上传

图片上传

<UploadImage v-model="formData.logo" class="w-20 h-20" :file-extensions="['.png', '.jpg', '.jpeg']" />

上传到某个 disk 配置，如下

• disk
• path, 上传到某个文件夹，这个 path 是在 disk 对应的某个路径下

<UploadImage v-model="formData.logo" class="w-20 h-20" :file-extensions="['.png', '.jpg', '.jpeg']" disk="xxxx" path="xxx/images" />

单文件上传

基本使用，默认上传到 uploads disk 配置。

<UploadFile v-model="files" :file-extensions="['.md', '.txt', '.csv', '.xlsx']" />

上传到某个 disk 配置，如下

• disk
• path, 上传到某个文件夹，这个 path 是在 disk 对应的某个路径下

<UploadFile v-model="files" :file-extensions="['.md', '.txt', '.csv', '.xlsx']" disk="xxxx" path="xxx/files" />

多文件上传

基本使用，默认上传到 uploads disk 配置。

<UploadFiles v-model="files" :file-extensions="['.md', '.txt', '.csv', '.xlsx']" />

上传到某个 disk 配置，如下

• disk
• path, 上传到某个文件夹，这个 path 是在 disk 对应的某个路径下

<UploadFiles v-model="files" :file-extensions="['.md', '.txt', '.csv', '.xlsx']" disk="xxxx" path="xxx/files" />

附件上传

默认使用单图

<AttachUpload v-model="formData.logo" class="w-20 h-20" />

选择多个附件

<AttachUpload v-model="formData.logo" class="w-20 h-20" :multi="true" />

OSS 上传

首先需要配置 OSS 配置之后，在使用下面的组件

<OssUpload v-model="formData.logo" class="w-20 h-20" />

COS 上传

首先需要配置 COS 配置之后，在使用下面的组件

<CosUpload v-model="formData.logo" class="w-20 h-20" />