Upload 上传组件

基于 el-upload 和 qiniu.js 做了进一步封装，支持el-upload所有属性和方法、图片裁剪等。

事前准备

由于上传文件到七牛云需要有七牛token，而上传成功后返回的文件地址缺少域名，所以使用前需要在完整引入或是按需引入组件时添加qiniuTokenApi和qiniuDomain，且api类型必须是返回response.data的函数

完整引入

import { qiniuToken } from '@/api'
import DgAdminComponent from '@degon/admin-component-vue3'
// ...
createApp(App)
  .use(DgAdminComponent, {
    qiniuTokenApi: qiniuToken,
    qiniuDomain: import.meta.env.VITE_APP_CDN_DOMAIN
  })

按需引入

import { qiniuToken } from '@/api'
import { DgUpload } from '@degon/admin-component-vue3'
// ...
createApp(App)
  .use(DgUpload, {
    qiniuTokenApi: qiniuToken,
    qiniuDomain: import.meta.env.VITE_APP_CDN_DOMAIN
  })

基础使用

:::demo 通过success钩子获取返回的url地址

<template>
  <dg-upload :file-list="fileList" @success="handleSuccess" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const imgUrl = ref('')
const fileList = [
  {name: 'pic.jpeg', url: 'https://qn.myas.maissy.net/Frn7QNGlrHU6dlG1qZqYtsja6ENQ'}
]

function handleSuccess(url: string) {
  imgUrl.value = url
}
</script>

:::

:::demo

双向绑定file-list

<template>
  <dg-upload v-model:file-list="images" list-type="text" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const images = ref([])
</script>

:::

上传头像

:::demo 添加v-model属性绑定值，再结合list-type="picture"，show-file-list="false"可以实现头像上传

<template>
  <dg-upload v-model="avatar" list-type="picture" :show-file-list="false" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const avatar = ref('')
</script>

:::

属性

参数	说明	类型	可选值	默认值
isCrop	开启裁剪功能（非图片格式或多文件上传时此参数无效）	boolean	-	-
fileSize	限制上传文件的大小（单位: M）	string	-	10

事件

事件名	说明	参数
success	文件上传成功时的钩子	function(fileUrl, fileUrlList)
remove	文件上传失败时的钩子	function(file, fileList, fileUrlList)

方法

方法	说明	参数
clearFiles	清空已上传的文件列表(不要使用el-upload的clearFiles方法)	-

Scoped Slot

name	说明	参数
tip	提示说明文字	-