七牛云服务器的储存区域
存储区域
地域简称
上传域名
华东
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
1<template> 2 <div class="container"> 3 <div class="title"><h2>ElementUI的Upload上传图片到七牛云</h2></div> 4 <el-upload 5 class="upload-demo" 6 drag 7 :action="upload_qiniu_url" 8 :show-file-list="false" 9 :on-success="handleAvatarSuccess" 10 :on-error="handleError" 11 :before-upload="beforeAvatarUpload" 12 :data="qiniuData"> 13 <img v-if="imageUrl" :src="imageUrl" class="avatar"> 14 <div v-else class="el-default"> 15 <i class="el-icon-upload"></i> 16 <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> 17 </div> 18 <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2MB</div> 19 </el-upload> 20 </div> 21</template> 22 23<script> 24export default { 25 data() { 26 return { 27 qiniuData: { 28 key: "", 29 token: "" 30 }, 31 // 七牛云上传储存区域的上传域名（华东、华北、华南、北美、东南亚） 32 upload_qiniu_url: "http://upload-z1.qiniup.com", 33 // 七牛云返回储存图片的子域名 34 upload_qiniu_addr: "http://abc.clouddn.com/", 35 imageUrl: "", 36 Global: { 37 dataUrl: 'http://yoursite.com' 38 } 39 }; 40 }, 41 created() { 42 this.getQiniuToken(); 43 }, 44 methods: { 45 getQiniuToken: function() { 46 const _this = this; 47 this.$axios 48 .post(this.Global.dataUrl + "/qiniu/uploadToken") 49 .then(function(res) { 50 console.log(res); 51 if (res.data.success) { 52 _this.qiniuData.token = res.data.result; 53 } else { 54 _this.$message({ 55 message: res.data.info, 56 duration: 2000, 57 type: "warning" 58 }); 59 } 60 }); 61 }, 62 beforeAvatarUpload: function(file) { 63 this.qiniuData.key = file.name; 64 const isJPG = file.type === "image/jpeg"; 65 const isPNG = file.type === "image/png"; 66 const isLt2M = file.size / 1024 / 1024 < 2; 67 if (!isJPG && !isPNG) { 68 this.$message.error("图片只能是 JPG/PNG 格式!"); 69 return false; 70 } 71 if (!isLt2M) { 72 this.$message.error("图片大小不能超过 2MB!"); 73 return false; 74 } 75 }, 76 handleAvatarSuccess: function(res, file) { 77 this.imageUrl = this.upload_qiniu_addr + res.key; 78 console.log(this.imageUrl); 79 }, 80 handleError: function(res) { 81 this.$message({ 82 message: "上传失败", 83 duration: 2000, 84 type: "warning" 85 }); 86 } 87 } 88}; 89</script> 90 91<style scode> 92.title{ 93 margin:90px 0 40px 0; 94} 95.el-default .el-icon-upload { 96 margin-top: 125px; 97} 98.el-upload-dragger { 99 width: 350px; 100 height: 350px; 101} 102.avatar { 103 width: 350px; 104 height: 350px; 105 display: block; 106} 107</style>