uniapp怎么实现相册的自定义

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 + '%' }"绑定进度条宽度。

现在，我们已经完成了进度条的自定义。通过上面的代码，我们可以实现一个美观又实用的相册。