一、安装aliyun-oss前端依赖
npm install ali-oss
二、在utils文件夹下(可选)创建oss.js
这就相当于创建oss对象的工厂,在js文件中配置oss
const OSS = require('ali-oss'); // 引入ali-oss依赖
export function client() {
const client = new OSS({
region: '填写Bucket所在地域',
accessKeyId: '阿里云账号的ID',
accessKeySecret: '阿里云账号的Secret',
bucket: '上传到的bucket名称'
})
return client
};
三、我这里是结合了element的upload组件,当然也可以用原生玩
<template>
<div>
<el-upload class="avatar-uploader" :show-file-list="false" action=""
:before-upload="beforeAvatarUpload" :http-request="uploadImage">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
<script>
import * as OSS from "@/utils/oss.js"; // 引入oss.js
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
//判断文件格式
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
//自定义上传行为
uploadImage(file) {
console.log(file);
const dir = "ivan-test"; // 指定bucket中的文件夹上传
const fileName = `${dir}/${file.file.name}`; //定义唯一的文件名,否则会覆盖
let _this = this;
OSS.client()
.put(fileName, file.file)
.then((res) => {
console.log("上传成功", res); // 打印查看输出结果
_this.imageUrl = res.url; // 给页面组件绑定返回值的url
})
.catch((error) => {
console.log('发生错误', error);
});
}
}
}
</script>
<style scoped>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
总结:
这种对象存储的方式不常见,一般都是后端操作,知道有这么个玩法也是好的。