You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

187 lines
3.9 KiB

<template>
<view>
<text class="example-info">文件选择上传组件可以选择图片视频等任意文件并上传到当前绑定的服务空间</text>
<uni-group title="只选择图片">
<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
</uni-group>
<uni-group title="只选择视频">
<uni-file-picker limit="9" file-mediatype="video" title="最多选择9个视频"></uni-file-picker>
</uni-group>
<!-- #ifdef H5 || MP-WEIXIN -->
<uni-group title="选择任意文件">
<uni-file-picker limit="5" file-mediatype="all" title="最多选择5个文件"></uni-file-picker>
</uni-group>
<!-- #endif -->
<uni-group title="自定义图片大小">
<view class="custom-image-box">
<text class="text">选择头像</text>
<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles" file-mediatype="image">选择</uni-file-picker>
</view>
</uni-group>
<uni-group title="只读并自定义样式">
<uni-file-picker readonly :value="fileLists" :imageStyles="imageStyles" file-mediatype="image"></uni-file-picker>
<uni-file-picker readonly :value="fileLists" :listStyles="listStyles" file-mediatype="all"></uni-file-picker>
</uni-group>
</view>
</template>
<script>
export default {
data() {
return {
imageStyles: {
width: 64,
height: 64,
border: {
radius: '50%'
}
},
listStyles: {
// 是否显示边框
border: true,
// 是否显示分隔线
dividline: true,
// 线条样式
borderStyle: {
width: 1,
color: 'blue',
style: 'dashed',
radius: 2
}
},
fileLists: [{
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
extname: 'png',
name: 'shuijiao.png'
}, {
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
extname: 'png',
name: 'uniapp-logo.png'
}, {
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
extname: 'png',
name: 'shuijiao.png'
}]
}
},
methods: {
}
}
</script>
<style>
@charset "UTF-8";
/* 头条小程序组件内不能引入字体 */
/* #ifdef MP-TOUTIAO */
@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src: url("~@/static/uni.ttf") format("truetype");
}
/* #endif */
/* #ifndef APP-NVUE */
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #efeff4;
min-height: 100%;
height: auto;
}
view {
font-size: 14px;
line-height: inherit;
}
.example {
padding: 0 15px 15px;
}
.example-info {
padding: 15px;
color: #3b4144;
background: #ffffff;
}
.example-body {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 0;
font-size: 14px;
background-color: #ffffff;
}
/* #endif */
.example {
padding: 0 15px;
}
.example-info {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
padding: 15px;
color: #3b4144;
background-color: #ffffff;
font-size: 14px;
line-height: 20px;
}
.example-info-text {
font-size: 14px;
line-height: 20px;
color: #3b4144;
}
.example-body {
flex-direction: column;
padding: 15px;
background-color: #ffffff;
}
.word-btn-white {
font-size: 18px;
color: #FFFFFF;
}
.word-btn {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
border-radius: 6px;
height: 48px;
margin: 15px;
background-color: #007AFF;
}
.word-btn--hover {
background-color: #4ca2ff;
}
.custom-image-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.text {
font-size: 14px;
color: #333;
}
</style>