1.安装ali-oss
2.main.js
const OSS = require('ali-oss');
Vue.prototype.client= new OSS({
accessKeyId: '', // 查看你自己的阿里云KEY
accessKeySecret: '', // 查看自己的阿里云KEYSECRET
bucket: '', // 你的 OSS bucket 名称
region: 'oss-cn-beijing', // bucket 所在地址,我的是 华北2 北京
cname:true, // 开启自定义域名上传
endpoint:"" // 自己的域名
});
3.页面应用
<template>
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:http-request="fnUploadRequest"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img
v-if="dataForm.logo"
:src="dataForm.logo"
class="avatar"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
//图片上传成功回调
handleAvatarSuccess(res) {
console.log('成功回调',res)
if (res) {
this.dataForm.logo = res.url
console.log('进入res',this.dataForm.logo)
}
},
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;
},
async fnUploadRequest(options) {
try {
let file = options.file; // 拿到 file
let fileName = file.name.substr(0,file.name.lastIndexOf('.'))
let date = new Date().getTime()
let fileNames = `${date}_${fileName}` // 拼接文件名,保证唯一,这里使用时间戳+原文件名
// 上传文件,这里是上传到OSS的 uploads文件夹下
this.client.put("uploads/"+fileNames, file).then(res=>{
console.log('resss',res)
if (res.res.statusCode === 200) {
options.onSuccess(res)
}else {
options.onError("上传失败")
}
})
}catch (e) {
options.onError("上传失败")
}
}
}
}
</script>