elementui 上传七牛_element ui使用上传组件上传文件到七牛(qiniu-js)
博主正在重构博客中,刚开始时静态资源都是上传到本地服务器的,但这个项目博主最后打算真正上线运营的。索性就改进了下,把静态资源尽量放到云存储中,方便后续开发。这里把方法和遇到坑给记录下。
1.使用前提注册七牛云并创建存储空间
在秘钥管理中拿到 AccessKey/SecretKey
2.工作原理
上传文件到七牛有客户端上传和服务器上传两种方式,这里我们选择客户端上传,上传前从后端获取token,再通过客服端直接上传。获得上传成功后的key值,拼接上路径前缀,即是文件的资源路径,再将资源路径存入到数据库中。
3.后端接口搭建npm install qiniuimport Router from 'koa-router'
import axios from './utils/axios'
import qiniu from 'qiniu'
//需要填写你的 Access Key 和 Secret Key
const accessKey = '你的 Access Key'
const secretKey = '你的 Secret Key'
//要上传的空间
const bucket = '要上传的空间'
//声明路由
let router = new Router({ prefix: '/qiniu' })
//登录接口
router.post('/upload', async (ctx, next) => {
//上传到七牛后保存的文件名
let key = ctx.request.body.key
//生成上传 Token
// console.log(key, bucket)
let mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
let putPolicy = new qiniu.rs.PutPolicy({ scope: bucket })
// 生成上传文件的 token
let uptoken = putPolicy.uploadToken(mac)
if (uptoken) {
ctx.body = {
code: 0,
msg: '获取上传token成功',
uptoken
}
} else {
ctx.body = {
code: -1,
msg: '获取token失败'
}
}
})
export default router
更多功能可参考官方SDK文档
4.前端页面搭建
上传文件组件,根据存储区域不同设置action(具体可通过产品手册查看),请求携带参数通过data绑定
class="avatar-uploader"
id="imguplad"
action="https://upload.qiniup.com"
:data="qn"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
//七牛图片上传
qn: {
token: '',
key: ''
}
上传前先进行文件检查//上传封面前检查
async beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isGIF = file.type === 'image/gif'
const isPNG = file.type === 'image/png'
const isBMP = file.type === 'image/bmp'
if (!isJPG && !isGIF && !isPNG && !isBMP) {
this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
return false
}
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
//根据文件名生成上传唯一key值
let key =
'blog/image/' +
this.utils.formatDate(new Date().getTime(), 'YY/MM/DD/hh:mm:ss/') +
file.name
console.log(key)
await this.getuploadToken(key)
return (isJPG || isGIF || isPNG || isBMP) && isLt2M
}
同时获取token,根据日期时间设置唯一key值//获取七牛上传token
getuploadToken: async function(key) {
const { status, data } = await this.$axios.post('/qiniu/upload', {
key
})
// console.log(status, data)
if (status == 200 && data.uptoken) {
this.qn.token = data.uptoken
this.qn.key = key
// console.log(this.qn)
}
}
上传成功后将返回的key值拼接为真正的url资源路径,并设置到addpost.post_bg上,让img标签正常显示图片//返回上传的图片地址
handleAvatarSuccess(res, file) {
this.addpost.post_bg = 'https://gravatar.catbk.cn/' + res.key
}
效果大概这样
文章列表
elementui 上传七牛_element ui使用上传组件上传文件到七牛(qiniu-js)相关推荐
- elementui表格宽度适应内容_element ui 表格高度自适应
首先给表格初始一个高度 tableHeight: (window.innerHeight || document.documentElement.clientHeight || document.bo ...
- html5无组件上传,ASP上传漏洞 无组件上传图片文件(转载)
对于上传漏洞的查找,仍是从源文件入手,目标有两个,一个是FilePath(文件路径),另一个则是FileName(文件名称). 一.FilePath 说到FilePath,有些朋友可能感到陌生,但要提 ...
- 最快的ASP无组件上传类(4M只需10秒)0.96版
<% '---------------------------------------------------------------------- '转发时请保留此声明信息,这段声明不并会影响 ...
- Asp无组件上传进度条解决方案
http://webuc.net/dotey/archive/2004/07/22/1334.aspx 我还是一点一点用一个实例来说明的吧,客户端HTML如下.要浏览上传附件,我们通过<inpu ...
- 使用SmartUpload组件上传文件
刚刚上手的项目 被文件上传困扰了好久,之前用fileupload组件上传,代码参考孤傲苍狼博客,可是除了文件名,表单内的其他内容不知道该怎么读出来进行存储:所以此次采用smartupload组件进行上 ...
- 从Element ui看开发公共组件的三种方式
在日常的开发工作中,封装自己的公共组件是很常见的需求,但想要组件更加优雅和通用也是一门学问.恰好前段时间用过Element ui,于是想学习这种库是如何封装插件的,这篇文章就是我的一点理解. 从入口文 ...
- Vue + ElementUI 如何优雅的上传文件到七牛OSS
2019独角兽企业重金招聘Python工程师标准>>> ** 本文的上传模式是前端直传七牛oss模式,后端只负责提供token,避免泄露accessKey ** 原文:原文地址,里面 ...
- elementui中同时上传多个文件_element ui 上传文件,批量一次上传多个文件,为什么是发送了多次请求,我想一次请求,然后发送多个文件怎么实现呢?...
想要的效果是 用户一次选择的文件一个接口上传完毕,但是element ui 里面是上传了多次一次一个文件的形式上传的 为4参数的接口调用了 多次执行的上传,我想上传一次 多个文件的 怎么实现呢? 因为 ...
- mysql备份七牛云存储_定时备份 Mysql并上传到七牛的方法
多数应用场景下,我们需要对重要数据进行备份.并放置到一个安全的地方,以备不时之需. 常见的 MySQL 数据备份方式有,直接打包复制对应的数据库或表文件(物理备份).mysqldump 全量逻辑备份. ...
最新文章
- Android巩固之事件分发机制
- Java Spring @Scheduled 定时任务crontab表达式设置
- BZOJ 1176: [Balkan2007]Mokia( CDQ分治 + 树状数组 )
- 转 互联网推送服务原理:长连接+心跳机制(MQTT协议)
- mac-phpstorm 快捷键
- SQLServer事务的隔离级别
- 【数据结构与算法】AVL树的Java实现
- Python format()函数
- 计算机网络原理中子网掩码,计算机网络应用 子网掩码计算器(SubNetMaskCalc)
- 一打卡作弊软件CEO被判5年6个月,网友:这也太...
- 新浪开发者平台 android 签名,新浪微博接入流程
- Java程序员进阶书籍 ,看这11本书就够了
- hbase1.2.1配置kerberos
- 【设计模式】适配器模式:如何巧妙地过滤游戏中的敏感词
- 替换字符串中的英文括号为其他字符串
- 利用windows画图工具进行图片拉伸
- 中国水球装备行业市场供需与战略研究报告
- ajax header请求,如何在用户登陆之后给每个页面往后台的ajax请求header都带上
- FZU 2301 Chosen by god (组合数学+打表+快速幂)
- c++实现装饰模式完整源代码
热门文章
- 钉钉总裁不穷首谈产品观:To B产品用户不只是CEO
- 我们为什么需要云原生?看完这一篇就够了
- IDC报告:中国公有云服务市场同比增长49.7%,领跑全球
- 区块链人才缺口明年将达顶峰,核心开发者年入百万很正常
- file_get_contents请求失败处理_SpringCloud Gateway网关处理请求过程中遇到400Bad Request问题解决方案...
- 两个对象数组交集_yiduobo的每日leetcode 349.两个数组的交集 amp;amp; 350.两个数组的交集II...
- linux6.6 sudo环境变量,linux sudo环境变量设置
- mysql 走索引 很慢_MySQL优化:为什么SQL走索引还那么慢?
- java.lang.NoClassDefFoundError: org/apache/commons/codec/DecoderException 的解决办法
- vmware安装问题:Microsoft Runtime DLL安装程序未能完成安装