一、vue:
1、首先注册阿里云账号,阿里云官网
2、安装
npm install ali-oss -D
3、在页面中使用
<template>
<div>
<el-upload
class="upload-demo"
action=""
:on-change="handleChange"
:auto-upload="false"
:limit="1">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</template>
<script>
import OSS from 'ali-oss'
export default {
components:{},
data() {
return {
}
},
mounted() {
},
methods:{
handleChange(file, fileList) {
this.upLoadImg(fileList[0].raw)
},
upLoadImg(files) {
// 实例化OSS
const client = new OSS({
region:'oss-cn-hangzhou', // 地域 //oss-cn-hangzhou 就是地域
accessKeyId: 'LTAIXXXxxXX', // id
accessKeySecret: 'kfG8xxxxxxxxx', // 秘钥
bucket: 'abcdefggdd' // OSS存储区域名 例如:https://abcdefggdd.oss-cn-hangzhou.aliyuncs.com // abcdefggdd 就是存储区域名
});
client.multipartUpload(files.name, files).then(result => {
let url = result.res.requestUrls
url = url[0].split("?")
console.log(url[0]) // 接口返回的图片路径,上传、使用都可以
}).catch(function (err) {
console.log(err);
});
}
}
}
</script>
二、uniapp:
1、安装插件→无需后台签名
2、配置config.js
3、将crypto.js中的 第106行 代码注释掉,否则安卓端插件会不可用。
4、页面中使用
<template>
<view class="main" style="padding-top: 30rpx;">
<view class="whole">
<view class="flexW aLine color333">
<text>修改头像</text>
<view style="position: relative;">
<image @click="avatar()" :src="details.headimage" style="width: 126rpx;height: 126rpx;border-radius: 50%;"/>
</view>
</view>
</view>
</view>
</template>
<script>
import uploadImage from "../../js_sdk/yushijie-ossutil/ossutil/uploadFile.js"
export default {
data() {
return {
details:'',
fileInfo:''
}
},
onLoad() {
},
methods: {
avatar() {
let that = this
uni.chooseImage({
count: 1,
success: res => {
var tempFilePaths = res.tempFilePaths;
uploadImage(res.tempFilePaths[0], 'images/',
result => {
that.details.headimage = result
// result 接口返回的路径,可直接使用
},err =>{
console.log(err);
})
}
})
},
}
}
</script>
<style lang="scss">
.whole {
background: #fff;
margin: 0 30rpx;
border-radius: 20rpx;
font-size: 30rpx;
}
</style>