zoukankan      html  css  js  c++  java
  • elementUI配合七牛上传图片

    参考博客地址:https://www.cnblogs.com/darkerxi/p/9606399.html

    七牛云服务器的储存区域

    存储区域地域简称上传域名
    华东 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>

  • 相关阅读:
    mysql导出导入数据库和表学习笔记
    gitlab+jenkins学习笔记
    mysql数据库的备份与恢复
    第十二天python3 匿名函数
    第十三天python3 生成器yield
    [Todo]Java反序列化-weblogic
    bcrypt浅析
    AWD准备
    Linux下提权练习
    wordpress站点被恶意重定向
  • 原文地址:https://www.cnblogs.com/fqh123/p/12125165.html
Copyright © 2011-2022 走看看