element 上传图片（文件）到七牛云

一、基础步骤：

• 注册七牛云，并且完成实名认证
• 完成后会在个人中心->秘钥管理中看到两个秘钥AccessKey/SecretKey

二、获取token

这里直接贴上官方文档（整理我直接使用官方生成的token）

官方地址：https://developer.qiniu.com/kodo/manual/1208/upload-token

 

三、配置上传地址：

 上传地址查看：配置相应的action： https://developer.qiniu.com/kodo/manual/1671/region-endpoint

 

postData中token是七牛上传token，key:设置上传的文件名

 

参数不明白的可以直接看文档说明：https://element.eleme.cn/#/zh-CN/component/upload

 

四、直接上代码

<template>
  <div class="dashboard-container">
    <div class="dashboard-text">测试:123</div>

 <el-upload
              class="avatar-uploade"
              :multiple="true"
              :action="actionPath"
              accept="image/jpeg,image/gif,image/png,image/bmp"
              :before-upload="beforeAvatarUpload"
              :data="postData"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

  </div>
</template>


<script>
  export default {
    data() {
      return {
        imageUrl: '',
        actionPath:"https://upload-z2.qiniup.com",
        postData:{
                token: "YqlWhkR0lAtzXAVy-1VE3dla-w5xyMC_tXsSgFdV:Zb97CW7xkVjO-Yhb5rCy1UcmmZ4=:",
                  key:""
        }
      };
    },
    
    mounted() {
      this.postData.key=Date.parse(new Date())+'.png';

    },

    methods: {
      handleAvatarSuccess(res, file) {
          console.log("上传成功",res, file) 
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        console.log("上传前") 
      }
    }
  }
</script>