一、基础步骤:
注册七牛云,并且完成实名认证完成后会在个人中心->秘钥管理中看到两个秘钥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>