七牛云服务器的储存区域
存储区域 | 地域简称 | 上传域名 |
---|
华东 | z0 | 服务器端上传:http(s)://up.qiniup.com |
华东 | z0 | 客户端上传: http(s)://upload.qiniup.com |
华北 | z1 | 服务器端上传:http(s)://up-z1.qiniup.com |
华北 | z1 | 客户端上传: http(s)://upload-z1.qiniup.com |
华南 | z2 | 服务器端上传:http(s)://up-z2.qiniup.com |
华南 | z2 | 客户端上传: http(s)://upload-z2.qiniup.com |
北美 | na0 | 服务器端上传:http(s)://up-na0.qiniup.com |
北美 | na0 | 客户端上传: http(s)://upload-na0.qiniup.com |
东南亚 | as0 | 服务器端上传:http(s)://up-as0.qiniup.com |
东南亚 | as0 | 客户端上传: http(s)://upload-as0.qiniup.com |
<template>
<div class="container">
<div class="title"><h2>ElementUI的Upload上传图片到七牛云</h2></div>
<el-upload
class="upload-demo"
drag
:action="upload_qiniu_url"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:on-error="handleError"
:before-upload="beforeAvatarUpload"
:data="qiniuData">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<div v-else class="el-default">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过2MB</div>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
qiniuData: {
key: "",
token: ""
},
// 七牛云上传储存区域的上传域名(华东、华北、华南、北美、东南亚)
upload_qiniu_url: "http://upload-z1.qiniup.com",
// 七牛云返回储存图片的子域名
upload_qiniu_addr: "http://abc.clouddn.com/",
imageUrl: "",
Global: {
dataUrl: 'http://yoursite.com'
}
};
},
created() {
this.getQiniuToken();
},
methods: {
getQiniuToken: function() {
const _this = this;
this.$axios
.post(this.Global.dataUrl + "/qiniu/uploadToken")
.then(function(res) {
console.log(res);
if (res.data.success) {
_this.qiniuData.token = res.data.result;
} else {
_this.$message({
message: res.data.info,
duration: 2000,
type: "warning"
});
}
});
},
beforeAvatarUpload: function(file) {
this.qiniuData.key = file.name;
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG) {
this.$message.error("图片只能是 JPG/PNG 格式!");
return false;
}
if (!isLt2M) {
this.$message.error("图片大小不能超过 2MB!");
return false;
}
},
handleAvatarSuccess: function(res, file) {
this.imageUrl = this.upload_qiniu_addr + res.key;
console.log(this.imageUrl);
},
handleError: function(res) {
this.$message({
message: "上传失败",
duration: 2000,
type: "warning"
});
}
}
};
</script>
<style scode>
.title{
margin:90px 0 40px 0;
}
.el-default .el-icon-upload {
margin-top: 125px;
}
.el-upload-dragger {
width: 350px;
height: 350px;
}
.avatar {
width: 350px;
height: 350px;
display: block;
}
</style>