vue3.0 + element-plus + 上传图片到七牛云

时间：

2021.8.30 ，想在项目中，把上传的图片存储到 七牛云 上，但是发现，七牛云他只给了一个限时 30 天的 cdn，就是在30天后，这个就会取消掉，不知道上传后的图片还有没有在 。需要绑定 备案的域名，就应该可以永久使用了吧，不过我没有 备案的域名，但是还是记录一下 。

1. 创建七牛云账号：

创建账号后，需要实名后，才能开通一个 30 天，内存为 10G 的域名！

1、创建一个对象存储 空间：

他会让你起一个空间名称，用来存储你的东西！

地区我选择的是 华南的，访问控制选择 公开的。

创建后，会显示在这里，要注意的是，如果没有绑定一个 备案的域名，他到30天，就会过期。东西应该就会没有了的。要注意，应该是这样的。

2. 在后台，返回 token 给前端：

1、选择后端技术：

这个是 七牛云 规定的，上传图片时，必须携带 token 来证明用户的信息，我使用的是 node 来做后端。

官网教程： 这个网站是使用，不同的技术的 后端，生成 token 的做法，可以看看 。

我选中 node.js 。

他会跳到 github ，让我们现在插件 ：

2、下载插件：

serve > npm install qiniu

是在你的后端中下载的。

使用他时，需要几个参数，要到 七牛云 去查找：

右上角头像 ----- 个人中心 ----- 密钥管理 ------ 就可以看到 AK 和 SK 2个值，复制；

• accessKey ：AK；
• secretKdy ： SK；
• scope： 你创建空间的名字；

使用的是 nestjs：

import * as qiniu from 'qiniu';

@Controller()
export class AdminController {
  constructor(private readonly adminService: AdminService) {}

  // 组件上传图片的 token，前端必须先获取这个 token
  @Get('key')
  getkey() {
    var accessKey = 'dg87lClBFLrluuIyKP8-oVS5YaYyWqlG2mukaJmo';
    var secretKdy = 'D7BkyrvQixBpRGuXOtOgNf3M2msgn2GLrsTwzre_';
    var mac = new qiniu.auth.digest.Mac(accessKey, secretKdy);
    var options = { 
      scope: 'mtbx', 
    };
    var putPolicy = new qiniu.rs.PutPolicy(options);
    var uploadToken = putPolicy.uploadToken(mac);

    return {
      token: uploadToken
    };
  }
}

返回的数据，需要以这种格式返回：

{
    token: xxxxx;
}

3. 前端上传图片：

前端是使用 vue3.0 + element-plus 的上传组件，进行上传图片。

1、获取后端的 token：

setup() {
    const content = reactive({
        token: {},
        imageUrl: ''
    })
    
	async function getToken(){
      const { data } = await axios.get('key');
      console.log(data); //  { token: xxxxx }
      content.token = data
    }

    onMounted(() => {
      getToken();
    })
    
    const refContent = toRefs(content);
    
    return {
        ...refContent
    }
}

得到后端的 token；

2、使用上传组件 :

<template>
    <el-upload
      class="avatar-uploader"
      action="http://upload-z2.qiniup.com"
      :data="token"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon">i>
    el-upload>
template>

参数说明：

action：

说明：不同区域的上传地址不同，可以参考官网的路径：官网地址

咦，框错了，是 加速上传 的那个地址！！！。

data：

说明：就是我们从后端获取的 token。

然后，在上传组件上传成功后的回调函数中输出 七牛云 返回的图片路径：

然后进行拼接，前面的地址是你 七牛云 的 CND 名。

 function handleAvatarSuccess(res) {
      console.log(res)
      const url = 'http://qyh7d8zuc.hn-bkt.clouddn.com/' + res.key;
      console.log(url);
    }

在 左上角 --- 对象存储 --- 空间管理 ----- 点击空间名 进到里面就可以看到了：

这样，上传图片应该可以完成 。

参考文章：

• EsunR