vue中上传图片到阿里云oss

在项目中安装 npm i ali-oss -S

oos上传文件官网地址

---

configOss.js

let OSS = require('ali-oss');
export function client()
{
	var client = new OSS({
		region: 'oss-cn-hangzhou',//地域
// 		endpoint:"oss-cn-hangzhou.aliyuncs.com",//访问域名
		accessKeyId: 'xxx',//你自己的key和id
		accessKeySecret: 'xxx',
		bucket: 'xxx',//oss上你的存储空间名称
		secure: true,
	})
	return client;
}

---

index.vue中引用

<template>
	<input type="file" name="files" @change="onClick_uploadimg($event)" ref="fileImg" accept="image/*">
</template>
<script>
	import {client} from '../configOss.js'
	export default{
		data(){
			return{
			}
		},
		methods:{
			onClick_uploadimg(e){	
				var fileName = 'uploadImg/' + (new Date().getTime() + 1000) + '.png';
				let reader = new FileReader();
				let fileData = e.target.files[0];
				reader.readAsDataURL(fileData);
				client().multipartUpload(fileName, fileData).then((res) => {
					//var imgUrl = res.res.requestUrls[0];//返回的上传图片的地址
					console.log(res,'成功')
					e.target.value = "";//input连续上传同一张图片会失效，每次成功把它置空一下
				}).catch((err) => {
					console.log(err,'失败')
				})
			}
		}
	}
</script>
<style>

</style>