微信小程序/vue通过阿里云上传图片

1.首先前端放入获取上传的组件
微信小程序uview组件：
https://www.uviewui.com/components/upload.html

vue所使用的element组件：
https://element.eleme.cn/#/zh-CN/component/upload

上面一个是微信小程序的上传，一个是普通浏览器的前端上传组件的代码出处。

后端我们需要一个阿里云的依赖，这个依赖是工具包用的。

    <dependency>
        <groupId>com.aliyun.oss</groupId>
        <artifactId>aliyun-sdk-oss</artifactId>
        <version>3.10.2</version>
    </dependency>

接下来需要配置yaml文件

aliyun:
  oss:
    file:
      endpoint: oss-cn-（区域：上海、北京等，用拼音表达，注意这个括号是不存在的）.aliyuncs.com
      keyId: 开通oss服务时生成的keyId
      keySecret: 开通oss服务时生成的keySecret
      dirName: 阿里云上传图片路径的文件名比如：/avatar
      bucketName: bucketName

这些去哪里获取，如何开通
（1）开通OSS服务
去阿里云打开oss管理控制台开通



然后创建Bucket存储空间



创建文件夹上传图片

在头像中，点击“AccessKey管理”进行RAM设置

选择使用子用户
创建用户组：

添加用户
添加用户到用户组
设置权限

获取子用户AccessKeyId,AccessKeySecret
这样就获取到了ymal所以的配置信息。
接下里就是后端程序代码和两个工具类：
上传方法：

    @Resource
    private OSSUtils ossUtils;

    @PostMapping("/upload")
    public BaseResult upload(MultipartFile file)throws IOException{
        System.out.println("dadadadaad");
        InputStream is = file.getInputStream();
        String path = ossUtils.uploadToOSS(file);
        if (file.getSize()>1048576){
            return BaseResult.error("图片不得大于1M");
        }
        paths=path;

        return BaseResult.ok("上传成功",path);
    }

两个工具类：

package com.czxy.oss;

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;


@Component
@ConfigurationProperties(prefix="aliyun.oss.file")
@Data
public class OSSProperties {
    private String endpoint;
    private String keyId;
    private String keySecret;
    private String dirName;
    private String bucketName;
}

package com.czxy.oss;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import java.util.UUID;

/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 */
@Component
public class OSSUtils {

    @Resource
    private OSSProperties ossProperties;

    /**
     * 上传到OSS
     * @param file 上传文件
     * @return 上传后的路径
     */
    public String uploadToOSS(MultipartFile file) {

        try {

            // 创建OSSClient实例。
            OSS ossClient = new OSSClientBuilder().build(ossProperties.getEndpoint(), ossProperties.getKeyId(), ossProperties.getKeySecret());

            //System.currentTimeMillis()  //毫秒值
            String name = UUID.randomUUID().toString().replace("-", "");        //32长度

            // 截取图片的扩展名   mm.jpg
            String[] arr = file.getOriginalFilename().split("\\.");

            // 路径
            String path =  ossProperties.getDirName() + "/" + name + "." + arr[1];

            // 上传图片
            ossClient.putObject(ossProperties.getBucketName(), path , file.getInputStream());

            // 关闭OSSClient。
            ossClient.shutdown();

            //https://czxy-lt.oss-cn-shanghai.aliyuncs.com/avatar/b9c4d0a19b1d48eb89d9ff61284f83d6.jpg
            return "https://"+ossProperties.getBucketName()+"."+ossProperties.getEndpoint()+"/" + path;
        } catch (Exception e) {
            throw new RuntimeException("上传OSS异常");
        }
    }

}

其中微信小程序的前端代码与平时的vue不同，大家可以参考微信官方文档。