vue二次封装van-uploader上传图片组件(移动端)

<template>
  <view class="uploader">
    <view class="uploader-list" v-if="fileList.length">
      <view
        class="uploader-list-item"
        v-for="(item, index) in fileList"
        :key="index"
      >
        <image :src="item" class="uploader-list-item-image" />
        <view class="uploader-list-item-remove" @click="removeImage(index)">移除</view>
      </view>
    </view>
    <view v-if="fileList.length < maxCount" class="uploader-box" @click="chooseImage">
      <van-icon name="plus" size="36px" color="#e6e6e6" />
    </view>
  </view>
</template>
 
<script>
export default {
  props: {
    maxCount: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: this.maxCount - this.fileList.length,
        success: chooseImageRes => {
          this.fileList = [...this.fileList, ...chooseImageRes.tempFilePaths];
          this.$emit('change', this.fileList);
        }
      });
    },
    removeImage(index) {
      this.fileList.splice(index, 1);
      this.$emit('change', this.fileList);
    }
  }
};
</script>
 
<style scoped>
.uploader {
  /* 样式按需定制 */
}
.uploader-list {
  /* 样式按需定制 */
}
.uploader-list-item {
  /* 样式按需定制 */
}
.uploader-list-item-image {
  /* 样式按需定制 */
}
.uploader-list-item-remove {
  /* 样式按需定制 */
}
.uploader-box {
  /* 样式按需定制 */
}
</style>

这段代码实现了一个移动端的图片上传组件，它使用了Vue和uni-app的API，并且可以通过props接收最大上传数量（maxCount）。它包含选择图片、预览图片列表和移除图片的功能。通过自定义事件change将选中的图片数组发送到父组件。