Upload 上传

提供更加强大的上传组件，可配合表单组件c-form使用。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
modelValue	String,Array,Object	null	数据格式 {name:'',url:''}	All
radius	String,Number,Array	c-radius-base	圆角尺寸 支持c-radius-开头的类	All
type	String	image	上传类型，image，video，media（image和video），all app安卓端选择的视频最大只支持180MB type=all，只支持h5和微信小程序、qq小程序 app下选择全部文件，可以结合原生插件并实现uni.$c.config.upload.chooseFile()方法	All
listStyle	String	card	列表风格，card，text，picText	All
autoUpload	Boolean	false	是否自动上传 =false时，可调佣本组件this.$refs.myUpload.upload()方法手动上传 =true时，需要实现this.$refs.myUpload.uploadApi	All
editName	Boolean	false	是否可编辑name	All
delBtn	Boolean	true	是否显示删除按钮	All
preview	Boolean	true	是否可预览	All
sourceType	String,Array	['album','camera']	album从相册选图，camera使用相机，默认二者都有	All
compressed	Boolean	true	是否压缩	All
limit	String,Number	9	可上传数量	All
camera	String	back	调用的摄像头，'front'、'back' 生效范围： 1、type=video且在APP、微信小程序、京东小程序下 2、type=image的微信小程序、抖音小程序、飞书小程序、京东小程序	All
extension	String,Array	null	文件扩展名过滤，h5下有效，或type=all时	All
maxDuration	Number,String	30	视频最大录制时长， type=video时：APP、微信小程序、百度小程序、京东小程序 type=media时：微信小程序、抖音小程序、飞书小程序、京东小程序 视频时长只能是3~30秒。	All
disabled	Boolean	null	是否禁用	All
display	Boolean	false	是否展示模式，可用于回显	All
chooseBtnPosition	String	after	选择按钮位置，before，after	All
chooseBtnProps	Object	{}	选择按钮样式 参考c-btn的props	All
itemSize	Number,String,Array	null	列表项尺寸 listStyle=card时为160rpx，listStyle=picText时为80rpx 为Array表示[宽，高]	All
itemGutter	Number,String	16rpx	列表项间隙	All
itemBdrColor	String	null	列表项边框颜色 支持c-bdr-开头的类	All
thumbProps	Object	{}	预览的图片设置 参考c-img的props	All
nameProps	Object	{}	文件名样式 参考c-text的props	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

注意

视频预览需要为page.json文件配置页面/pages/cook-uni/video，并复制文件uni_modules/cook-uni/pages/cook-uni/video.nvue到/pages/cook-uni文件夹。

事件

事件名	说明
update:modelValue

插槽

插槽名	说明
btn	上传按钮插槽
default

方法

名称	说明
chooseFile	自定义选择文件，返回一个promise 跳过：reject(false) 成功：resole([{fileType:'',name:'',size:0,tempFilePath:''}])
uploadApi	文件上传实现，返回一个promise 失败：reject('失败信息') 成功：resole({url:'',...})
upload(arguments)	手动上传，使用前需先实现uploadApi： upload(callback) upload(index,callback) callback(fileList,status,[index])status的值start,uploading,finish，fileList项包含url属性，表示上传此项成功
formatValue(imgList)	格式化数据，用于传递给组件

示例

<template>
    <c-form ref="form" :formData="formData">
        <c-form-item label="上传图片" prop="imgList">
            <c-upload ref="myUpload" v-model="formData.imgList" />
        </c-form-item>
        <c-btn text="提交" type="primary" @click="submitHandle" />
    </c-form-item>
</template>
<script setup>
import {onReady} from '@dcloudio/uni-app'
import { ref } from 'vue'

const formData = {
    imgList: []
}

const myUpload = ref(null);

// 实现上传接口
onReady(()=>{
    myUpload.value.uploadApi = ({tempFilePath,fileType}) => {
        return new Promise((resolve, reject) => {
            // 上传api
            uni.$c.api.upload(file.tempFilePath,file.fileType).then(res=>{
                resolve({url:res.url}) // 至少包含一个url属性，其他值会附加在结果列表中
            }).catch(err=>{
                reject(err);
            })
        });
    }

    // 如果要统一处理，可以在入口文件中，全局配置中实现 uni.$c.config.upload.uploadApi =  (file) => {}; 
})

const form = ref(null);
function submitHandle() {
    form.value.validate().then(() => {
        // 上传图片
        myUpload.value.upload((filesRes,status,index)=>{
            if(status === 'finish'){
                uni.hideLoading();

                // 过滤掉上传失败的文件,包含url属性表示上传成功
                const successFiles = filesRes.filter(v=>v.url);
                console.log('上传成功的文件：':successFiles);

                // 其他操作

            }else if(status === 'uploading'){
                uni.showLoading({title:`正在上传第${index+1}/${filesRes.length}个文件`});
            }
        })
    })
}
</script>