uniapp实现多个图片，然后点击按钮保存上传

要实现多个图片的上传和保存，你需要使用uniapp的上传组件和网络请求API。

首先，在模板中定义一个上传组件，例如：

<template>
  <div>
    <div v-for="(item, index) in images" :key="index">
      <img :src="item" width="100" height="100" />
    </div>
    <button @click="uploadImages">上传图片</button>
    <button @click="saveImages">保存图片</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [] // 存放上传的图片
    };
  },
  methods: {
    uploadImages() {
      uni.chooseImage({
        count: 9,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: res => {
          this.images = res.tempFilePaths;
        }
      });
    },
    saveImages() {
      if (this.images.length === 0) {
        uni.showToast({
          title: "请先上传图片",
          icon: "none"
        });
        return;
      }

      let formData = new FormData();
      for (let i = 0; i < this.images.length; i++) {
        formData.append("file", this.images[i]);
      }

      uni.request({
        url: "http://your_upload_url",
        method: "POST",
        header: {
          "content-type": "multipart/form-data"
        },
        data: formData,
        success: res => {
          if (res.statusCode === 200) {
            uni.showToast({
              title: "上传成功",
              icon: "success"
            });
          } else {
            uni.showToast({
              title: "上传失败",
              icon: "none"
            });
          }
        }
      });
    }
  }
};
</script>

上述代码中，我们使用了uni.chooseImage方法来选择多张图片，并将它们存放在images数组中。然后，我们使用FormData将images数组中的图片打包成一个form表单，使用uni.request方法将其上传到服务器。

如果要保存图片，你需要使用canvas将图片绘制到画布上，并使用uni.saveImageToPhotosAlbum将画布保存到相册中。例如：

<template>
  <div>
    <canvas ref="canvas" width="300" height="300"></canvas>
    <button @click="saveCanvas">保存画布</button>
  </div>
</template>

<script>
export default {
  methods: {
    saveCanvas() {
      uni.showLoading({
        title: "保存中...",
        mask: true
      });

      let canvas = this.$refs.canvas;
      let ctx = canvas.getContext("2d");

      let image = new Image();
      image.src = "http://your_image_url";
      image.crossOrigin = "anonymous";
      image.onload = () => {
        ctx.drawImage(image, 0, 0, 300, 300);

        uni.canvasToTempFilePath({
          canvas: canvas,
          success: res => {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.hideLoading();
                uni.showToast({
                  title: "保存成功",
                  icon: "success"
                });
              },
              fail: () => {
                uni.hideLoading();
                uni.showToast({
                  title: "保存失败",
                  icon: "none"
                });
              }
            });
          }
        });
      };
    }
  }
};
</script>

上述代码中，我们使用canvas绘制了一张图片，然后使用uni.canvasToTempFilePath将画布转换为临时文件路径，最后使用uni.saveImageToPhotosAlbum将图片保存到相册中。

注意：在使用uni.saveImageToPhotosAlbum保存图片时，需要用户授权，否则会保存失败。