在uniapp小程序中使用阿里云OSS上传图片（有部分视频教程）_uniapp上传图片到oss

1. 前言

这是本人毕业设计中其中一个功能点，就是用户在微信小程序（使用uniapp框架）中的社区模块中可以发布个人动态，其中动态可包含图片，那么我们发布的图片在实际开发中不会直接放到项目中吧，因为那样会是整个项目体积变大，所以我想利用阿里云的OSS把发布成功的图片自动上传到它那里，同时数据库会存放上传成功的图片路径，然后在前端中调用后端接口显示出来。

2. 实现效果（最后放个演示视频吧）

３. 实现思路

1、申请一个阿里云账号，开通一个OSS对象存储，创建阿里云oss许可证视频教程（老师讲的很细，我也没必要细说，看视频更清楚）

2、在后台写上传图片的接口，参考阿里云官方文档

3、在前端点击按钮进行调用

提示：实话说，你看完那个视频教程，你应该已经学会了

4. 实现步骤

这里不讨论创建阿里云oss许可证了。。

4.1 后端

（1）首先，创建一个OSSClientUtil工具类

//监听项目已启动，spring加载后执行接口一个方法
@Component
public class OSSClientUtil implements InitializingBean {

    //阿里云OSS地址，这里看根据你的oss选择
    private String endpoint = "";
    //阿里云OSS的accessKeyId
    private String accessKeyId = "";
    //阿里云OSS的密钥
    private String accessKeySecret = "";
    //阿里云OSS上的存储块bucket名字
    private String bucketName = "";
    //阿里云图片文件存储目录
    // private String homeImageDir = "community/";

    // 定义公开静态变量
    public static String END_POINT;
    public static String ACCESS_KEY_ID;
    public static String ACCESS_KEY_SECRET;
    public static String BUCKET_NAME;

    @Override
    public void afterPropertiesSet() throws Exception {
        END_POINT = endpoint;
        ACCESS_KEY_ID = accessKeyId;
        ACCESS_KEY_SECRET = accessKeySecret;
        BUCKET_NAME = bucketName;
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

(2) 创建一个 OssService

public interface OssService {
    String publishImgToOSS(MultipartFile file);
}
1
2
3

(3)创建OssServiceImpl

@Service
public class OssServiceImpl implements OssService {
    @Override
    public String publishImgToOSS(MultipartFile file) {
        // 工具类取值
        String endPoint = OSSClientUtil.END_POINT;
        String accessKeyId = OSSClientUtil.ACCESS_KEY_ID;
        String accessKeySecret = OSSClientUtil.ACCESS_KEY_SECRET;
        String bucketName = OSSClientUtil.BUCKET_NAME;
        try {
            // 创建OSS实例
            OSS ossClient = new OSSClientBuilder().build(endPoint, accessKeyId, accessKeySecret);
            // 上传文件流
            InputStream inputStream = file.getInputStream();
            // 获取文件名称
            String fileName = file.getOriginalFilename();
            // 1 在文件名称里面添加随机唯一的值 防止重名
            String uuid = UUID.randomUUID().toString().replaceAll("-", "");
            fileName = uuid + fileName;
            // 2 把文件按照日期进行分类
            String dataPath = new DateTime().toString("yyyy/MM");
            // 3 拼接
            fileName = "community/" + dataPath + "/" + fileName;
            // 4 调用oss方法实现上传
            ossClient.putObject(bucketName, fileName, inputStream);
            // 5 关闭ossClient
            ossClient.shutdown();
            // 把上传之后的文件路径返回  需要符合阿里云oss的上传路径
            // https://nsx-fitness.oss-cn-guangzhou.aliyuncs.com/..
            String url = "https://" + bucketName + "." + endPoint + "/" + fileName;
            return url;
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

当然了，你要现在阿里云那里新建文件夹，再写上面的拼接

(4) 编写接口方法

@PostMapping("publishImgToOSS")
    public R publishImgToOSS(MultipartFile file, HttpServletRequest request) {
        FUser fUser = getFUserByRequest(request);
        if (StringUtils.isNotNull(fUser)) {
            // 用户的动态图片上传到oss
            String url = ossService.publishImgToOSS(file);
            return R.success("上传成功", url);
        }
        return R.error("上传失败");
    }
1
2
3
4
5
6
7
8
9
10

4.2 前端

前端页面为了方便和美观，我使用了uview提供的上传图片的组件u-upload

<template>
	<view class="publish">
		<u-toast ref="uToast" />
		<view class="content">
			<u-input type="textarea" v-model="content" :maxlength="2000" placeholder="晒健身自拍、晒元气美食......" @input="writeContent" clearable="false"
			 auto-height />
			<view class="max_length">
				{{content.length}} / 2000
			</view>
		</view>
		<view class="upLoad">
			<u-upload ref="uUpload" :action="action" :show-progress="true" :max-size="5 * 1024 * 1024"
			 max-count="6" width="220" height="220" :multiple="true" :header="header" @on-success="uploadSuccess"></u-upload>
			<view class="publish_button">
				<button @click="submit">发布</button>
			</view>
		</view>
	</view>
</template>

<script>
	var imgArray = [];
	export default {
		data() {
			return {
				content: '',
				action: 'http://ip:port/fitness/fitness/check/publishImgToOSS',
				header: {}
			}
		},
		onShow() {
			imgArray = [];
		},
		onLoad() {
			let token = uni.getStorageSync('token');
			this.header = {
				Authorization: "wx" + token
			};
		},
		methods: {
			writeContent(e){
				this.content = e;
			},
			submit() {
				// 手动上传
				if(this.content!=='' || imgArray.length!==0){
					this.publish();
					let _self = this;
					// 延时操作
					setTimeout(function() {
						_self.$refs.uToast.show({
							title: '发布成功',
							type: 'success',
							back:true
						})
					}, 1000);
				}else{
					this.$refs.uToast.show({
						title: '请输入发布内容或图片',
						type: 'error',
						icon:false
					})
				}
			},
			// 图片上传成功时触发,data为服务器返回的数据
			uploadSuccess(data){
				imgArray.push(data.data);
			},
			publish(){
				let newImg = imgArray.toString();
				this.$u.api.publishDynamic({
					content:this.content,
					img:newImg
				}).then(res=>{
					console.log(res);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.publish {
		width: 100%;
		height: 100%;

		.content {
			width: 670rpx;
			margin: 20rpx 30rpx;
			background-color: rgba($color: #f2f2f2, $alpha: 0.8);
			padding: 10rpx;

			.max_length {
				font-size: 30rpx;
				color: #c0c4cc;
				margin-top: 10rpx;
				width: 100%;
				text-align: right;
				margin-left: -10rpx;
			}
		}

		.upLoad {
			width: 740rpx;
			margin: 0 10rpx;
			.publish_button {
				margin-top: 30rpx;
				width: 750rpx;
				height: 70rpx;
				button {
					height: 70rpx;
					background-color: #37bc8f;
					width: 160rpx;
					font-size: 33rpx;
					color: #FFFFFF;
					border-radius: 100rpx;
					letter-spacing: 7rpx;
					line-height: 33px;
				}
			
				button::after {
					border: none;
				}
			}
		}
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

5. 实现效果视频