qilin-element3x

Appearance

QilinUploadImage组件 ​

QilinUploadImage组件用于上传图片。

示例: ​

1、指定action上传 ​

uploadImageConfig.autoUpload须设置为true。

vue
<template>
    <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig"
        @success="(value)=>{
            console.log(value);
        }"
        @actionSuccess="(res,file)=>{
            uploadImageConfig.fileList.push({...res[uploadImageConfig.imageOptions?.responseDataName || 'data']});
            console.log(uploadImageConfig.fileList)
        }"
    ></QilinUploadImage>
</template>
<script setup>
import {reactive,ref} from "vue";

const uploadImageConfig=reactive({
    action:"http://36.140.58.148:8099/authCenterService/common/upload",
    headers:{Authorization:"***"},
    autoUpload:true,
    fileList:[],
    limit:1,
    imageOptions:{
        serverUrl:"url"
    }
});
</script>

2、指定action上传（回显已上传图片） ​

uploadImageConfig.autoUpload须设置为true。

vue
<template>
    <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig"
        :fileList='[
            {
                fileName:"/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png",
                newFileName:"20221123-mp-certified-banner_20240418100434A012.png",
                originalFilename:"20221123-mp-certified-banner.png",
                url:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            }
        ]'
        @success="(value)=>{
            console.log(value);
        }"
        @actionSuccess="(res,file)=>{
            uploadImageConfig.fileList.push({...res[uploadImageConfig.imageOptions?.responseDataName || 'data']});
            console.log(uploadImageConfig.fileList)
        }"
    ></QilinUploadImage>
</template>

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

const uploadImageConfig=reactive({
    action:"http://36.140.58.148:8099/authCenterService/common/upload",
    headers:{Authorization:"***"},
    autoUpload:true,
    fileList:[],
    limit:1,
    imageOptions:{
        serverUrl:"url"
    }
});
</script>

3、不指定action上传 ​

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

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

const uploadImageConfig=reactive({
    fileList:[],
    imageIp:"http://36.134.22.190:8061",
    limit:1,
    imageFit:"fill"
});
</script>

4、不指定action上传（回显已上传图片） ​

vue
<template>
    <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig"
        :fileList='[
            {
                fileName:"/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png",
                newFileName:"20221123-mp-certified-banner_20240418100434A012.png",
                originalFilename:"20221123-mp-certified-banner.png",
                name:"20221123-mp-certified-banner.png",
                url:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            }
        ]'
        @success="(value)=>{
            console.log(value);
        }"
    ></QilinUploadImage>
</template>

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

const uploadImageConfig=reactive({
    fileList:[],
    imageIp:"http://36.134.22.190:8061",
    limit:1,
    imageFit:"fill"
});
</script>

5、不指定action上传的另一种样式 ​

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

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

const uploadImageConfig=reactive({
    fileList:[],
    imageIp:"http://36.134.22.190:8061",
    limit:1,
    showIconImage:true
});
</script>

Props参数 ​

uploadImageConfig object ​

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

属性名类型
说明
可选值默认值
actionstring文件上传至服务器的url地址-#
headersobject设置上传的请求头，当action时有值时，用以设置token等参数--
listTypestring上传列表的内建样式text, picture, picture-cardpicture-card
autoUploadboolean是否自动上传，当指定action上传时autoUpload须设置为true-false
limitnumber最大允许上传的文件数量-1
fileListarray上传的文件列表，必填--
multipleboolean是否支持多选文件-true
dragboolean是否支持拖拽上传-true
disabledboolean是否禁用-false
fileTypeTextstring上传文件类型提示-（支持png、jpg、jpeg、gif文件格式）
fileTypearray[string]上传文件类型-['png','jpg','jpeg','gif']
fileSizenumber文件上传的内容大小，默认限制在20M以内，单位为KB-20 * 1000 * 1000
fileSizeTextstring文件上传大小提示-大小20M以内
iconfontstring显示的iconfont图标，需自行引入相关的iconfont图标库--
showIconImageboolean是否显示另一类形式的图片组件样式-false
imageFitstring图片填充模式fill, contain, cover, none, scale-downcontain
imageIpstring设置查看图片服务器ip--预览图片时须借助该属性或imageOptions属性的配置--
imageOptionsobject图片配置项，详见 imageOptions--

imageOptions object ​

图片配置项，支持以下参数。

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

Events事件 ​

组件的暴露事件。

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

皖ICP备2022015884号-1 Copyright © 2023-2026 Qilin