uniapp中上传图片到OSS服务器，上传图片upload修改为同步请求、以及h5和APP端压缩图片

插件地址

下载好插件，先修改config.js，再引入插件，这个插件很好用啊，是直接上传到服务器。纯前端（项目中要用，试了好久终于弄好了,赶紧记录下省得忘了）

1. 上传到服务器

一、打开文件的config.js文件,需要改三个地方。

1. fileHost要改成你的阿里云地址：协议要写成https。地址不会看的可以看官网介绍
2. AccessKeySecret在阿里云控制台可以找到的
3. OSSAccessKeyId控制台可以找到的

注意 : 其中小程序还需要在平台上配置上传文件的域名。

1. 登录你的微信公众平台，找到开发管理导航
   
2. 找到开发设置下的服务器域名
   
3. 找到uploadFile合法域名，点击右边的修改，会让你登录，然后输入你的OSS服务器fileHost地址。注意要以;结尾啊。如https://ceshi.oss-cn-beijing.aliyuncs.com;,要不然人家不让你保存。
   

二、引入使用，上传成功的回调就是图片的地址。

页面引入：

// 引入上传图片的插件 uploadFiles.js文件，路径自行修改啊
	import uploadImage from '@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js'

demo：

<template>
	<view class="content">
		<view class="box">
			<image :src="item" mode="" class="img" v-for="item in imagesList" :key="item"></image>
		</view>

		<button type="default" @click="addImages()">上传图片</button>
	</view>
</template>
<script>
	// 引入上传图片的插件
	import uploadImage from '@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js'
	export default {
		data() {
			return {
				// 图片地址列表，回显图片用
				imagesList: []
			}
		},
		onLoad() {

		},
		methods: {
			// 上传图片
			addImages() {
				uni.chooseImage({
					count: 9, // 默认最多一次选择9张图
					sourceType: ['album', 'camera'], //图片来源
					success: res => {
						console.log(res);
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						var tempFilePaths = res.tempFilePaths;
						
						//   如果只上传一张图片就写res.tempFilePaths[0]
						// uploadImage(res.tempFilePaths[0], 'images/',
						// 	result => {
						// 		console.log('打印的图片地址', result);
						// 		this.imagesList.push(result)
						// 		uni.hideLoading();
						// 	}
						// )
						

						//支持多图上传
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							//显示消息提示框
							uni.showLoading({
								mask: true
							})
							//上传图片
							//图片路径可自行修改  'images/' 表示的是上传到oss服务器保存的图片文件夹下此时是images文件下
							uploadImage(res.tempFilePaths[i], 'images/',
								result => {
									console.log('打印的图片地址', result);

									// 成功上传后的OSS服务器图片地址放到图片列表中并显示
									this.imagesList.push(result)

									uni.hideLoading();
								}
							)
						}
					}
				})
			}

		}
	}
</script>

<style lang="less">
	.box {
		width: 90%;
		height: 180rpx;
		border: solid 1rpx #999999;
		margin: 0 auto;
		display: flex;
	}

	.img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 8rpx;
		margin-right: 10rpx;
	}

	button {
		margin-top: 60rpx;
	}
</style>

• 测试可用
  

• APP端上传图片的话要注释下crypto.js中的106行好像，没测试过。

---

2. 有时候一个页面需要多个地方使用上传图片组件，此时需要是同步的……

         async clickUploadImage(){
				let res=await this.addImages()
				console.log(res,'上传图片的URL地址是');
				
			},
			addImages() {
				return new Promise((resolve, reject) => {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择 拍照
						success: function(res) {
							let tempFiles = res.tempFilePaths[0];
							addImagesImage(
								tempFiles,'images/',
								result => {
									console.log(result);
									resolve(result);
								},
								error => {
									reject(error);
									uni.showToast({
										icon: 'none',
										title: '上传失败'
								 });
								}
							);
						},
						fail: function(ref) {
							console.log(ref);
						}
					});
				});
			},

3. 压缩图片h5和app端

有时候上传图片太大了，需要压缩图片、下面这篇文章写的很好可以参考下。
参考文章他写的很好

• APP端使用的是这个api：plus.zip.compressImage