QilinUploadFile组件

QilinUploadFile组件用于上传文件。

示例:

1、指定action上传

uploadFileConfig.autoUpload须设置为true。

<template>
    <QilinUploadFile v-model:uploadFileConfig="uploadFileConfig"
        @success="(value)=>{
            console.log(value);
        }"
        @actionSuccess="(res,file)=>{
            uploadFileConfig.fileList.push({...res[uploadFileConfig.fileOptions?.responseDataName ||          'data'],raw:file.raw});
        }"
    ></QilinUploadFile>
</template>

<script setup> 
import {reactive,ref} from "vue";

const uploadFileConfig = reactive({
    action:"http://36.140.58.148:8099/authCenterService/common/upload",
    headers:{
        Authorization:"Bearer ***"
    },
    autoUpload:true,
    limit:1,
    fileType:["png","jpg","jpeg","gif"],
    fileTypeText:'（支持"png","jpg","jpeg","gif"格式）',
    fileList:[],
    fileOptions:{
        serverName:"originalFilename"
    },
    previewFn:(item)=>{
        console.log(item);
    },
    downloadFn:(item)=>{
        console.log(item);
    }
});
</script>

2、指定action上传（回显已上传文件）

uploadFileConfig.autoUpload须设置为true。

<template>
    <QilinUploadFile v-model:uploadFileConfig="uploadFileConfig"
        :fileList='[
            {
                fileName: "/profile/upload/2024/04/16/微信图片_20240401163930_20240416172625A002.png",
                newFileName: "微信图片_20240401163930_20240416172625A002.png",
                originalFilename: "微信图片_20240401163930.png",
                url: "https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            }
        ]'
        @success="(value)=>{
            console.log(value);
        }"
        @actionSuccess="(res,file)=>{
            uploadFileConfig.fileList.push({...res[uploadFileConfig.fileOptions?.responseDataName ||          'data'],raw:file.raw});
        }"
    ></QilinUploadFile>
</template>

<script setup> 
import {reactive,ref} from "vue";

const uploadFileConfig = reactive({
    action:"http://36.140.58.148:8099/authCenterService/common/upload",
    headers:{
        Authorization:"Bearer ***"
    },
    autoUpload:true,
    limit:1,
    fileType:["png","jpg","jpeg","gif"],
    fileTypeText:'（支持"png","jpg","jpeg","gif"格式）',
    fileList:[],
    fileOptions:{
        serverName:"originalFilename"
    },
    previewFn:(item)=>{
        console.log(item);
    },
    downloadFn:(item)=>{
        console.log(item);
    }
});
</script>

3、不指定action上传

上传会得到二进制文件，用户须自行手动处理上传至后端接口。

<template>
    <QilinUploadFile v-model:uploadFileConfig="uploadFileConfig"
        @success="(value)=>{
            console.log(value);
        }"
    ></QilinUploadFile>
</template>

<script setup> 
import {reactive,ref} from "vue";

const uploadFileConfig=reactive({
    limit:1,
    fileType:["png","jpg","jpeg","gif"],
    fileTypeText:'（支持"png","jpg","jpeg","gif"格式）',
    uploadText:"拖入此处上传或点击上传--无action上传方式",
    fileList:[],
    fileOptions:{
        serverName:"name"
    },
    previewFn:(item)=>{
        console.log(item);
    },
    downloadFn:(item)=>{
        console.log(item);
    }
});
</script>

4、不指定action上传（回显已上传文件）

上传会得到二进制文件，用户须自行手动处理上传至后端接口。

<template>
    <QilinUploadFile v-model:uploadFileConfig="uploadFileConfig"
        :fileList='[
            {
                fileName: "/profile/upload/2024/04/16/微信图片_20240401163930_20240416172625A002.png",
                newFileName: "微信图片_20240401163930_20240416172625A002.png",
                originalFilename: "微信图片_20240401163930.png",
                name: "微信图片_20240401163930.png",
                url: "https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            }
        ]'
        @success="(value)=>{
            console.log(value);
        }"
    ></QilinUploadFile>
</template>

<script setup> 
import {reactive,ref} from "vue";

const uploadFileConfig=reactive({
    limit:1,
    fileType:["png","jpg","jpeg","gif"],
    fileTypeText:'（支持"png","jpg","jpeg","gif"格式）',
    uploadText:"拖入此处上传或点击上传--无action上传方式",
    fileList:[],
    fileOptions:{
        serverName:"name"
    },
    previewFn:(item)=>{
        console.log(item);
    },
    downloadFn:(item)=>{
        console.log(item);
    }
});
</script>

Props参数

uploadFileConfig object

核心配置项，支持以下参数。

属性名	类型	说明	可选值	默认值
action	string	文件上传至服务器的url地址	-	#
headers	object	设置上传的请求头，当action时有值时，用以设置token等参数	-	-
listType	string	上传列表的内建样式	text, picture, picture-card	text
autoUpload	boolean	是否自动上传，当指定action上传时autoUpload须设置为true	-	false
limit	number	最大允许上传的文件数量	-	5
fileList	array	上传的文件列表，必填	-	-
multiple	boolean	是否支持多选文件	-	true
drag	boolean	是否支持拖拽上传	-	true
disabled	boolean	是否禁用	-	false
uploadText	string	上传文字说明	-	拖入此处上传或点击上传
fileTypeText	string	上传文件类型提示	-	（支持xls、word、pdf文件格式）
fileType	array[string]	上传文件类型	-	['xls','xlsx','doc','docx','pdf']
fileSize	number	文件上传的内容大小，默认限制在20M以内，单位为KB	-	20 * 1000 * 1000
previewFn	function	点击文件名称触发事件	()=>{}	-
downloadFn	function	点击文件下载图标触发事件	()=>{}	-
fileOptions	object	文件设置配置项，用以与后端接口联调配合使用，详见fileOptions	-

fileOptions object

fileOptions配置项，支持以下参数。

属性名	类型	说明	可选值	默认值
serverOriginalName	string	原始文件名称，用以对应后台返回的字段名称	-	originalFileName
serverName	string	回显文件名称，用以对应后台返回的字段名称	-	newFileName
serverUrl	string	回显文件url，用以对应后台返回的字段名称	-	fileName
responseDataName	string	文件上传至服务器，返回的响应字段，默认为data，通常也是data，当指定action上传方式时生效	-	data

Events事件

组件的暴露事件。

事件名	类型	参数	说明
success	function	value	图片上传成功后触发事件
actionSuccess	function	res,file	当指定action上传方式时图片成功上传后的触发事件