uni-app 图片上传功能实现多张图片上传

在实现uni-app中的多张图片上传功能时，我们可以利用uni-app提供的文件选择接口和上传接口。以下是一个基本的实现代码示例，包含图片选择和上传功能。

首先，在页面的<template>部分，我们需要一个按钮来选择图片，以及一个显示选中图片的列表：

<template>
  <view>
    <button @click="chooseImage">选择图片</button>
    <view v-for="(image, index) in images" :key="index" class="image-container">
      <image :src="image" mode="aspectFill" class="uploaded-image"></image>
    </view>
  </view>
</template>

在<script>部分，我们需要定义选择图片和上传图片的逻辑：

<script>
export default {
  data() {
    return {
      images: [] // 存储选中的图片路径
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 9, // 允许选择图片的数量
        sizeType: ['original', 'compressed'], // 可以选择原图或压缩后的图片
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
        success: (res) => {
          // tempFilePaths 是选中图片的路径数组
          this.images = this.images.concat(res.tempFilePaths);
        },
        fail: (err) => {
          console.error('选择图片失败：', err);
        }
      });
    },
    uploadImages() {
      const uploadTaskArray = this.images.map((imagePath) => {
        return uni.uploadFile({
          url: 'https://your-server-url/upload', // 替换为你的上传接口
          filePath: imagePath,
          name: 'file',
          formData: {
            user: 'test'
          },
          success: (uploadFileRes) => {
            console.log('上传成功：', uploadFileRes);
          },
          fail: (err) => {
            console.error('上传失败：', err);
          }
        });
      });

      // 如果需要等待所有上传任务完成，可以使用Promise.all
      Promise.all(uploadTaskArray.map(task => new Promise((resolve, reject) => {
        task.onComplete((res) => resolve(res));
      }))).then((results) => {
        console.log('所有图片上传完成：', results);
      }).catch((error) => {
        console.error('上传过程中出错：', error);
      });
    }
  }
};
</script>

在<style>部分，我们添加一些简单的样式：

<style>
.image-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.uploaded-image {
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

这个示例展示了如何在uni-app中实现多张图片的选择和上传。你可以根据自己的需求对代码进行扩展，比如添加图片预览、删除选中图片等功能。注意，实际使用时需要将url替换为你的服务器上传接口。