七牛云

最新推荐文章于 2024-08-27 21:17:35 发布

如果有了可惜

最新推荐文章于 2024-08-27 21:17:35 发布

阅读量210

点赞数

分类专栏：杂记

本文链接：https://blog.youkuaiyun.com/jufjzq/article/details/95964545

版权

杂记专栏收录该内容

17 篇文章

订阅专栏

封装API，获取七牛云token

api.js

export const getImgToken = {
    getToken: params => request({
        method: 'POST',
        url: '/qiniuyun',
        data: qs.stringify(params)
    }),
}

elementUI上传组件内

<el-upload
  地址
  action="https://up-z2.qbox.me"
  :data="qiniuToken"
>
  这里的src定义在ruleForm内或data内任意位置都可以
  <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar" />
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

...
import { getImgToken } from '@/utils/api'

data内存储七牛token
data(){
  return {
    qiniuToken: {
      token: ""
    }
  }
},

初始化获取token，赋值给data
created() {
  getImgToken.getToken().then(res => {
    res.code == "0" ? (this.qiniuToken.token = res.data.qiniutoken) : 0
  })
}

上传成功钩子改变data内的图片路径字符串
methods:{
  handleAvatarSuccess(res) {
    this.ruleForm.imageUrl = "http://pty2tfogv.bkt.clouddn.com/" + res.hash;
  }
}