Skip to content

GitLab

Closed
Created by 姚阳子@yaoyangzi

页面内有多个文件上传组件时会多次请求七牛token优化方案

问题描述

目前大部分vue项目中上传组件是在mounted生命周期函数中请求七牛token，将token存在data中，当遇到一个页面中有多个文件上传组件时，会在页面加载时发起多次请求，以pms展位编辑页面为例 image

优化方案

将七牛token存储到vuex store中，在上传组件的mounted生命周期函数中通过判断store中是否有相应的文件上传token，如没有则调用对应的异步更新方法

state中的qiniuToken结构可以设计为：

state: {
  qiniuToken: {
    image: {
      time: 1674113383641, // 过期时间
      token: 'EQT5Z3nOVS3DZ7vBWTaB-vTN73ATZEhV...' // image上传token
    },
    video: {
      time: 1674113383641, // 过期时间
      token: 'EQT5Z3nOVS3DZ7vBWTaB-vTN73ATZEhV...' // video上传token
    },
  },
},

在上传组件中获取七牛token：

get uploadData() {
  const qiniuToken = this.$store.getters['getQiniuToken'];
  return {
    token: qiniuToken[this.uploadParams.bucket], // this.uploadParams.bucket：上传文件类型
  };
}

在上传组件中更新七牛token：

 this.$store.dispatch('$_UpdateQiniuToken', this.uploadParams.bucket); // this.uploadParams.bucket：上传文件类型
Edited by 姚阳子