首先 配置好华为云OBS所需的bucket,拿到访问秘钥。
在Bucket-基本信息里面查看Endpoint,并配置好华为云OBS CORS跨域规则,避免跨域报错。
所需有:Bucket,Endpoint,AccessKeyId,Secret AccessKey
开始写项目
引入两个js,
npm install --save vue-uuid
npm i esdk-obs-browserjs
在你的vue项目中,新建一个OBS上传图片的页面,如图所示
<template>
<div class="component-upload-image">
<el-upload action list-type="picture-card" :before-upload="handleBeforeUpload" name="file" :show-file-list="false"
:headers="headers" style="display: inline-block; vertical-align: top">
<el-image v-if="!value" :src="value">
<div slot="error" class="image-slot">
<i class="el-icon-plus" />
</div>
</el-image>
<div v-else class="image">
<el-image :src="value" :style="`width:100px;height:100px;`" fit="fill" />
<div class="mask">
<div class="actions">
<span title="预览" @click.stop="dialogVisible = true">
<i class="el-icon-zoom-in" />
</span>
<span title="移除" @click.stop="removeImage">
<i class="el-icon-delete" />
</span>
</div>
</div>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
<img :src="value" style="display: block; max-width: 100%; margin: 0 auto;">
</el-dialog>
</div>
</template>
<script>
import { uuid } from "vue-uuid";
import { getToken } from "@/utils/auth";
import ObsClient from "esdk-obs-browserjs/src/obs";
export default {
name: "ImageUpload",
props: {
// 值
value: {
type: String,
default: "",
},
// 大小限制(MB)
fileSize: {
type: Number,
default: 5,
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
type: Array,
default: () => ['png', 'jpg', 'jpeg'],
},
// 是否显示提示
isShowTip: {
type: Boolean,
default: true,
},
},
data() {
return {
dialogVisible: false,
headers: {
Authorization: "Bearer " + getToken(),
},
file: undefined,
};
},
computed: {
// 是否显示提示
showTip() {
return this.isShowTip && (this.fileType || this.fileSize);
},
},
methods: {
removeImage() {
this.$emit("input", "");
},
// 上传前校检格式和大小
handleBeforeUpload(file) {
console.log(file);
let that = this;
let fileExtension = "";
// 校检文件类型
if (this.fileType) {
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
}
const isTypeOk = this.fileType.some((type) => {
if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
});
if (!isTypeOk) {
this.msgError(
`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
);
return false;
}
}
// 校检文件大小
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) {
this.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
return false;
}
}
this.loading = this.$loading({
lock: true,
text: "上传中",
background: "rgba(0, 0, 0, 0.7)",
});
let uuids = uuid.v1() + Date.now() + "." + fileExtension;
debugger;
// 创建ObsClient实例
var obsClient = new ObsClient({
access_key_id: "上面的Access Key Id",
secret_access_key: "上面的Secret AccessKey",
server: "https://上面到的endPoint"
});
obsClient.putObject(
{
Bucket: "上面到的Bucket",
Key: "server/" + uuids, // 文件名 server是目录
SourceFile: file, //文件本体
},
function (err, result) {
if (err) {
console.error("Error-->" + err);
that.handleUploadError();
} else {
console.log("响应Status-->" + result.CommonMsg.Status);
// OBS响应没有文件地址,需自行拼接 拼接格式: https:// + 桶名 + endPoint + / + 上传的文件路径
that.$emit("input", "https://zjzxapp.obs.cn-east-3.myhuaweicloud.com/server/" + uuids);
that.loading.close();
}
}
);
return true;
},
// 上传失败
handleUploadError(err) {
console.log(err);
this.msgError("上传图片失败,请重试!");
this.loading.close();
}
},
};
</script>
<style scoped lang="scss">
.image {
position: relative;
.mask {
opacity: 0;
position: absolute;
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.3s;
}
&:hover .mask {
opacity: 1;
}
}
</style>
<style scoped>
.component-upload-image>>>.el-upload--picture-card {
width: 100px;
height: 100px;
line-height: 106px;
}
.component-upload-image>>>.el-image {
width: 100px !important;
height: 100px !important;
}
</style>
页面调用
<!-- 添加或修改用户对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="用户名称" prop="name">
<el-input v-model="form.name" placeholder="请输入用户名称" />
</el-form-item>
<el-form-item label="头像">
<ObsUpload v-model="form.picUrl"/>
</el-form-item>
<el-form-item label="介绍" prop="content">
<el-input v-model="form.content" type="textarea" rows="4" placeholder="请输入内容" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
<script>
import ObsUpload from '@/components/ObsUpload';
export default {
components: {
ObsUpload,
}
};
</script>