微信小程序图片上传到SpringBoot到阿里云OSS然后返回一个url

一、微信小程序部分代码

1.wxml

<view class="container">
  <button bindtap="chooseMedia" type="primary">选择图片</button>
  <input bindinput="inputText" placeholder="请输入文字" />
  <button bindtap="uploadData" type="primary">上传</button>
  <view wx:if="{{uploadTime}}">上传时间: {{uploadTime}}</view>
//展示图片
  <view wx:if="{{mediaUrls.length > 0}}">
    <view wx:for="{{mediaUrls}}" wx:key="{{index}}">
      <image src="{{item}}" mode="aspectFill" />
    </view>
  </view>
</view>

2.wxss

注：自己修改样式

.container {
  margin-top: 20px;
  text-align: center;
}

3.js

注：要把text文本放在wx.uploadFile的formData属性里面，会当做form表单形式提交文本

Page({
  data: {
    mediaUrls: [], // 保存选择的图片的临时路径列表
    text: '', // 保存输入的文字
    uploadTime: '', // 保存上传时间
  },
  chooseMedia: function () {
    wx.chooseMedia({
      count: 9 - this.data.mediaUrls.length, // 最多选择9张图片
      mediaType: ['image'],
      success: (res) => {
        const tempFilePaths = res.tempFiles.map((file) => file.tempFilePath); // 获取选择的图片的临时路径列表
        this.setData({
          mediaUrls: this.data.mediaUrls.concat(tempFilePaths), // 添加到已选择的图片列表中
        });
      },
    });
  },
  inputText: function (e) {
    this.setData({
      text: e.detail.value, // 获取输入的文字
    });
  },
  uploadData: function () {
    const uploadTime = new Date().toLocaleString(); // 获取当前时间
    this.setData({
      uploadTime: uploadTime, // 设置上传时间
    });

    const uploadPromises = this.data.mediaUrls.map((mediaUrl) => {
      return new Promise((resolve, reject) => {
        wx.uploadFile({
          url: 'http://localhost:9000/upload', // 替换为你的Spring Boot服务器的URL
          filePath: mediaUrl, // 上传选择的图片
          name: 'files',
          formData: {
            text: this.data.text, // 上传输入的文字
            uploadTime: uploadTime, // 上传时间
          },
          success: (res) => {
            resolve(res.data); // 上传成功后的响应数据
            console.log(this.data.mediaUrls);
          },
          fail: (error) => {
            reject(error);
          },
        });
      });
    });

    Promise.all(uploadPromises)
      .then((results) => {
        console.log("chenggong");
        console.log(results); // 所有图片上传成功后的响应数据
      })
      .catch((error) => {
        console.log(error); // 上传失败的错误信息
      });
  },
});

二、SpringBoot

1.OSSUtil工具类

package com.mz.auth.util;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.util.UUID;

@Component
public class OSSUtil {
    @Value("${aliyun.oss.file.endpoint}")
    private String endpoint;

    @Value("${aliyun.oss.file.accessKeyId}")
    private String accessKeyId;

    @Value("${aliyun.oss.file.accessKeySecret}")
    private String accessKeySecret;

    @Value("${aliyun.oss.file.bucketName}")
    private String bucketName;
    public String handleImageUpload(MultipartFile file) {
        // 获取上传的文件名
        String fileName = file.getOriginalFilename();
        System.out.println(fileName);
        // 你可以根据自己的需求将文件保存到指定的位置
        
        // 生成新的文件名，避免文件名冲突
        String newFileName = "test/"+UUID.randomUUID().toString() + "_" + fileName;
        try {
            // 创建OSSClient实例
            OSS ossClient = new OSSClientBuilder().build(endpoint,accessKeyId, accessKeySecret);

            // 上传文件到阿里云OSS
            ossClient.putObject(bucketName, newFileName, file.getInputStream());
            System.out.println("1234");
            // 关闭OSSClient
            ossClient.shutdown();

            // 返回文件在OSS中的访问URL
            System.out.println("https://" + bucketName + "." + endpoint + "/" + newFileName);
            return "https://" + bucketName + "." + endpoint + "/" + newFileName;
        } catch (IOException e) {
            System.out.println("cc");
            e.printStackTrace();
            return null;
        }
    }
}

2.OSSController

package com.mz.auth.web.controller;

import com.mz.auth.util.OSSUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

@RestController
public class OssController {
    @Autowired
    private OSSUtil ossUtil;


    @PostMapping("/upload")
    public void handleImageUpload(@RequestParam("files") MultipartFile[] files, @RequestParam("text") String text, @RequestParam("uploadTime") String uploadTime) {
        for (MultipartFile file:files){
            System.out.println(ossUtil.handleImageUpload(file));
        }



}}

3.配置文件

aliyun.oss.file.endpoint=oss-cn-guangzhou.aliyuncs.com
aliyun.oss.file.bucketName=
aliyun.oss.file.accessKeyId=
aliyun.oss.file.accessKeySecret=