1. 相册自定义的需求和样式
在开发uniapp项目时，我们常常需要使用到相册。而相册的默认样式已经不能满足我们的需求，需要进行自定义。这篇文章将会介绍自定义相册的方法，并展示自定义的相册效果。
首先，我们来看一下自定义的相册效果：
如上图所示，我们对相册进行了如下自定义：
添加了相册选择按钮，用于筛选要上传的图片
添加了图片上传进度条，让用户能够清晰地了解上传进度
2. 实现方法
下面，我们来看一下如何实现以上效果。
首先，我们需要引入uniapp官方提供的图片选择组件uni-image-picker：
<template>
<view>
<!-- 添加相册选择按钮 -->
<button @tap="chooseImage">选择图片</button>
<!-- 图片预览 -->
<view v-for="(image, index) in images">
<image :src="image" mode="widthFix" @tap="previewImage(index)" />
</view>
<!-- 图片上传进度条 -->
<progress v-if="uploadProgress !== null" :percent="uploadProgress" />
</view>
</template>
<script>
import uniImagePicker from '@/components/uni-image-picker/uni-image-picker.vue'
export default {
components: {
uniImagePicker
},
data () {
return {
images: [], // 存放选择的图片
uploadProgress: null, // 图片上传进度条
}
},
methods: {
// 选择图片
chooseImage () {
uni.chooseImage({
count: 9, // 最多可以选择的图片张数
success: res => {
this.images = res.tempFilePaths
}
})
},
// 预览图片
previewImage (index) {
uni.previewImage({
urls: this.images,
current: this.images[index]
})
},
// 上传图片
uploadImage () {
this.uploadProgress = 0
this.images.forEach((image, index) => {
uni.uploadFile({
url: 'http://your.upload.api', // 上传图片的api地址
filePath: image,
name: 'file',
success: res => {
// 上传成功
},
fail: err => {
// 上传失败
},
complete: () => {
// 上传完成
}
})
})
}
}
}
</script>
在上面的代码中，我们添加了一个按钮chooseImage，用于选择要上传的图片。将选择的图片存放在images数组中，并使用v-for指令进行渲染。对于图片上传，我们使用uni.uploadFile接口上传图片，并实时更新图片上传进度条的percent属性。
然而，这样的代码并不满足我们的需求，我们需要给它进行一些美化。
3. 添加相册选择按钮
我们可以使用uni-image-picker组件来实现相册选择按钮。这个组件已经提供了相册选择的功能，我们只需要在这个组件的基础上对其进行一些自定义即可。
首先，我们需要引入uni-image-picker组件：
<template>
<view>
<!-- 使用uni-image-picker组件实现相册选择 -->
<uni-image-picker :count="9" :sizeType="['original', 'compressed']" :sourceType="['album']" @pick="onImagePick">
<view class="upload" v-if="images.length === 0">
<i class="iconfont icon-tupian"></i>
<span>添加图片</span>
</view>
<image v-for="(item, index) in images" mode="aspectFill" :src="item.path" :key="index" @click.stop.prevent="previewImage(index)" />
</uni-image-picker>
<!-- 图片上传进度条 -->
<view v-if="uploadProgress !== null">
<view class="progress-value" :style="{ width: uploadProgress + '%' }" />
</view>
</view>
</template>
<script>
export default {
data () {
return {
images: [], // 存放选择的图片
uploadProgress: null, // 图片上传进度条
}
},
methods: {
// 选择图片
onImagePick (res) {
this.images = res.tempFiles.map(file => URL.createObjectURL(file.file))
},
// 预览图片
previewImage (index) {
uni.previewImage({
urls: this.images,
current: this.images[index]
})
},
// 上传图片
uploadImage () {
this.uploadProgress = 0
this.images.forEach((image, index) => {
uni.uploadFile({
url: 'http://your.upload.api', // 上传图片的api地址
filePath: image,
name: 'file',
success: res => {
// 上传成功
},
fail: err => {
// 上传失败
},
complete: () => {
// 上传完成
}
})
})
}
}
}
</script>
<style scoped>
.upload {
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
width: 160rpx;
height: 120rpx;
border: 1px solid #ddd;
border-radius: 4rpx;
font-size: 24rpx;
color: #999;
margin-right: 20rpx;
}
.upload .iconfont {
font-size: 40rpx;
margin-bottom: 10rpx;
}
.upload span {
margin-top: 10rpx;
}
</style>
当用户选择图片时，将会触发onImagePick方法。在这个方法中，我们通过URL.createObjectURL方法将选择的图片转换为本地路径并存入images数组中。
我们对uni-image-picker组件进行了一些样式的美化，让它更好看一些。现在，我们已经完成了相册选择按钮的自定义，接下来，我们将添加进度条。
4. 添加进度条
我们可以使用uniapp官方提供的<progress>组件来实现进度条。在上传图片时，我们会不断地更新uploadProgress变量，这个变量的值会实时更新进度条的percent属性。
我们添加进度条，代码如下：
<template>
<view>
<!-- 使用uni-image-picker组件实现相册选择 -->
<uni-image-picker :count="9" :sizeType="['original', 'compressed']" :sourceType="['album']" @pick="onImagePick">
<view class="upload" v-if="images.length === 0">
<i class="iconfont icon-tupian"></i>
<span>添加图片</span>
</view>
<image v-for="(item, index) in images" mode="aspectFill" :src="item.path" :key="index" @click.stop.prevent="previewImage(index)" />
</uni-image-picker>
<!-- 图片上传进度条 -->
<view class="progress">
<view class="progress-value" :style="{ width: uploadProgress + '%' }" />
</view>
</view>
</template>
<script>
export default {
data () {
return {
images: [], // 存放选择的图片
uploadProgress: null, // 图片上传进度条
}
},
methods: {
// 选择图片
onImagePick (res) {
this.images = res.tempFiles.map(file => URL.createObjectURL(file.file))
},
// 预览图片
previewImage (index) {
uni.previewImage({
urls: this.images,
current: this.images[index]
})
},
// 上传图片
uploadImage () {
this.uploadProgress = 0
this.images.forEach((image, index) => {
uni.uploadFile({
url: 'http://your.upload.api', // 上传图片的api地址
filePath: image,
name: 'file',
success: res => {
// 上传成功
},
fail: err => {
// 上传失败
},
complete: () => {
// 上传完成
}
})
})
}
}
}
</script>
<style scoped>
.upload {
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
width: 160rpx;
height: 120rpx;
border: 1px solid #ddd;
border-radius: 4rpx;
font-size: 24rpx;
color: #999;
margin-right: 20rpx;
}
.upload .iconfont {
font-size: 40rpx;
margin-bottom: 10rpx;
}
.upload span {
margin-top: 10rpx;
}
.progress {
width: 100%;
height: 10px;
background-color: #ddd;
}
.progress-value {
height: 10px;
background-color: #f60;
}
</style>
在上面的代码中，我们添加了一个进度条的样式，将进度条的高度设置为10px，背景颜色为灰色，进度颜色为橙色。在<view class="progress">中放置进度条，用v-bind:style="{ width: uploadProgress + '%' }"绑定进度条宽度。
现在，我们已经完成了进度条的自定义。通过上面的代码，我们可以实现一个美观又实用的相册。