时间：

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-uploadclass="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="data: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

vue3.0 + element-plus + 上传图片到七牛云相关推荐

elementui 上传七牛_用element ui上传图片到七牛踩过的坑
前端上传图片到七牛云的流程请求后端接口获取上传凭证请求七牛云地址上传图片到七牛云上传完毕将获得七牛云返回的图片地址七牛云地址说到七牛云地址,奴家真的是一把鼻涕一把泪刚开始做图片上传的时候, ...
前端上传图片到七牛云
前端如何上传图片到七牛云流程: 1.七牛云后台的对象存储功能 2.node.js后台生成七牛云的token 3.前端利用element UI/ice 的upload组件 4.文件名和token作为参 ...
实现Java+Vue上传图片到七牛云和从七牛云删除图片
环境准备开发环境后端: JDK1.8, SpringBoot2.2.2.RELEASE, Maven3.6.3 前端: vue-element-admin4.4.0 相关链接七牛云JavaSDK ...
uni-app 上传图片到七牛云
uni-app 上传图片到七牛云我的流程是:在上传图片到七牛之前,先调后端提供的接口获取token.key等,然后通过uni.uploadFile把token.key传给七牛: token:从后端获 ...
React中：富文本编辑器(react-quill),自定义上传图片到七牛云
1.组件封装 import React, { useState, useEffect, useRef } from 'react'; import ReactQuill from 'react-qui ...
七牛云上传图片到七牛云并返回图片URL
七牛云上传图片到七牛云并返回图片URL 鸣谢'追逐盛夏流年':https://blog.csdn.net/j1231230/article/details/80061834 在开发项目的时候,经常会 ...
小程序上传图片到七牛云
小程序上传图片到七牛云一.创建七牛云账号,获取ak.sk,创建对象存储空间名称二.服务端接口获取七牛token值,个人使用的php编写的 ...
前端如何上传图片到七牛云
From: https://www.jianshu.com/p/7520e0bee777 前端如何上传图片到七牛云流程: 生成token => token和图片作为new FromData() ...
html5七牛图片上传js,前端如何上传图片至七牛云
上传文件是我们在前端开发中经常遇到的一个问题.最近在做某项目管理后台的时候,需要将轮播图上传至七牛云.以前在Vue里面做过类似的功能,但是在Angular中使用同样的方法发现行不通. 此篇文章主要介绍 ...
koa2 + vue上传图片到七牛云
1.首先安装插件 koa-multer 用于上传图片和qiniu. npm install --save koa-multer npm install --save koa-qiniu 2.新建文件q ...

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

时间：

1. 创建七牛云账号：

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

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

1、选择后端技术：

2、下载插件：

3. 前端上传图片：

1、获取后端的 token：

2、使用上传组件 :

参数说明：

vue3.0 + element-plus + 上传图片到七牛云相关推荐

最新文章

热门文章

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

时间：

1. 创建七牛云账号：

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

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

1、选择后端技术：

2、下载插件：

3. 前端上传图片：

1、获取后端的 token：

2、使用上传组件 :

参数说明：

vue3.0 + element-plus + 上传图片到七牛云相关推荐

最新文章

热门文章

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