ElementUI的Upload上傳，配合七牛雲儲存圖片

七牛雲服務器的儲存區域

存儲區域	地域簡稱	上傳域名
華東	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>