注意

• 该组件必须传入appId、accessKey、secretKey，用于指定上传到某个项目

前言

git仓库 文档地址

pnpm

pnpm add @tuoyuan/file-components

安装

import "@tuoyuan/file-components/es/style.css"

import FileSelectPlugin from "@tuoyuan/file-components"
app.use(FileSelectPlugin, {
    appId: 'c25d1341-12d9-490e-a23c-a8fd07ae6af7',
    accessKey: '9ee5a064fed26830',
    secretKey: '8b5936d5ada8fa52575c3e4cc001e377'
})

Demo

file-uploader 示例

<template>
  <a-uploader v-model="fileList" accept="image" :folder-id="folderId" />
</template>

<script setup lang="ts">
import {FileUploaderListType} from "@tuoyuan/file-components";

const fileList = ref<FileUploaderListType[]>([
  {
    url: '/gateway-api/api/frontend-config-center.resource.file.get?id=65b1f1f0913e8000&ak=9ee5a064fed26830&sign=AWSqKhrrVfRfCtWBOyj1NSCKDTNTMbw0n2LBOvx%2FiDE%3D',
    resource_id: '1',
    resource_name: '1.png',
    file_mime_type: 'image/png'
  },
  {
    url: '/gateway-api/api/frontend-config-center.resource.file.get?id=65b2426f3d7e8000&ak=9ee5a064fed26830&sign=ufpJ1Ad%2FScJmg%2Fnlhvk7gCalaDPUNsVUPchiycCb9PA%3D',
    resource_id: '2',
    resource_name: '2.png',
    file_mime_type: 'image/png'
  },
])
const folderId = ref('65acfac4adfe8000')
</script>

<style scoped>

</style>

icon-picker示例

<template>
    <a-icon-picker v-model="selectIcon" :pick-config="pickConfig" />
</template>

<script setup lang="ts">
import {PickConfigType} from "@tuoyuan/file-components";

const pickConfig: PickConfigType = {
  folderPath: '/assets/icon-picker-test'
}
const selectIcon = ref('/api/frontend-config-center.resource.file.get?id=65b08621dc3e8000&ak=9ee5a064fed26830&sign=5R3h4yH5%2FApvt5Ubcdko3cIPYXFpPWf3Yr7xgl6Y%2Flo%3D')
</script>

<style scoped>

</style>