uniapp小程序图片直传阿里云oss（结合uni-file-picker插件）

需求：uniapp开发的微信小程序，使用uni-file-picker插件可以将图片上传至当前绑定的dcloud服务空间，而我们需要将图片直接传到公司的阿里云空间，不使用dcloud服务空间，不用走后台接口即可上传。

由于一开始做图片上传选用了uni-file-picker插件，后更改需求直传阿里云，所以这里是结合uni-file-picker插件做的图片直传。

1. uni-file-picker插件使用

<!-- 
    @readonly 组件是否只读
    @fileMediatype 上传类型，支持image/video
 -->
<uni-file-picker
	class="imgItem" 
	:readonly="type == 'view'? true: false"
	v-model="compressStart"
	fileMediatype="image" 
	mode="grid" 
	:limit="1" 
	@select="selectImg($event)"
	@delete="delImg($event)"
	>
</uni-file-picker>

2. 下载uniapp的阿里云oss上传工具插件，下载
引入sdk包

// 你的sdk包文件路径
    import uploadImage from "../../js_sdk/yushijie-ossutil/ossutil/uploadFile.js"

3. 修改sdk包中config.js文件配置信息
 

var fileHost = 'https://msmk-vms-images.oss-cn-beijing.aliyuncs.com/';//你的阿里云地址最后面跟上一个/   在你当前小程序的后台的uploadFile 合法域名也要配上这个域名
var config = {
   //aliyun OSS config
  uploadImageUrl: `${fileHost}`, // 默认存在根目录，可根据需求改
  AccessKeySecret: '你的阿里云key',        // AccessKeySecret 去你的阿里云上控制台上找
  OSSAccessKeyId: '你的阿里云keyid',         // AccessKeyId 去你的阿里云上控制台上找
   timeout: 87600 //这个是上传文件时Policy的失效时间
};
module.exports = config

4. 选择图片并上传

/**
    * @description 上传至阿里云
    * {imgFileName} 阿里云保存图片的文件夹名，自定
*/
selectImg(e,type) {
				console.log('选择图片成功',e)
				console.log('图片类型',type)
				let filearr = e.tempFiles
                // 支持多图片上传
				for(var i=0;i<filearr.length;i++) {
					let file = filearr[i].path
					uploadImage(file, 'imgFileName/',
					result => { 
						//成功之后，可以将result带去执行其它方法或者赋值
						console.log('success',JSON.stringify(result));
                        // 保存上传后的图片地址
						this.imgArr.push(result)
					},result =>{ 
						//这里写上传失败的代码 
						uni.showToast({
							title: '上传图片至阿里云失败',
							icon: 'none'
						})
						console.log('fail',JSON.stringify(result));
					})
				}
}