未加星标

原 荐 Vue + ElementUI 如何优雅的上传文件到七牛OSS

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏
小徐同学 工作日志

正文

Vue + ElementUI 如何优雅的上传文件到七牛OSS


原 荐 Vue + ElementUI 如何优雅的上传文件到七牛OSS
小徐同学 发布于 昨天 16:20

字数 614

阅读 1

收藏 0

Vue.js

开发十年,就只剩下这套Java开发体系了 >>>
原 荐 Vue + ElementUI 如何优雅的上传文件到七牛OSS

** 本文的上传模式是前端直传七牛oss模式,后端只负责提供token,避免泄露accessKey **

原文: 原文地址,里面有效果图

1.开通七牛OSS,创建bucket,并且实名认证,详细步骤自己看官网。 传送门

2.引入七牛Java SDK

<dependency> <groupId>com.qiniu</groupId> <artifactId>qiniu-java-sdk</artifactId> <version>[7.2.0, 7.2.99]</version> </dependency>

3.引入七牛Java SDK ,提供前端获取token API

public void getToken(){ String host = PropKit.get("qiniuHost"); String accessKey = PropKit.get("qiniuAccessKey"); String secretKey = PropKit.get("qiniuSecretKey"); String bucket = PropKit.get("qiniuBucket"); Auth auth = Auth.create(accessKey, secretKey); String token = auth.uploadToken(bucket); renderJson(RetKit.ok("token", token).set("host",host)); }

4.Vue 安装七牛提供的sdk

npm install qiniu-js

5.Elment上传组件加入http-request参数,并且把action指向 http://upload.qiniup.com/

<el-upload class="avatar-uploader" action="http://upload.qiniup.com/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :http-request="uploadRequest" > <img v-if="form.url" :src="form.url" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>

6.编写上传JS,大体是上传的时候先向后台请求token,拿到token后调用七牛sdk直传。next 可以输出上传进度,complete上传完成。

uploadRequest: function(request) { getToken().then(res => { let token = res.token; let host = res.host; upload( token, request, next => { let total = next.total; console.log(total); }, error => { console.log(error) }, complete => { let hash = complete.hash; let key = complete.key; this.form.url = host + "/" + key; console.log(hash); console.log(key); } ) }); handleAvatarSuccess(res, file) { this.imageUrl = URL.createObjectURL(file.raw); }, beforeAvatarUpload(file) { const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { this.$message.error("上传头像图片大小不能超过 2MB!"); } return isLt2M; } import * as qiniu from 'qiniu-js' // token 找后端,obj 这里指代从 el-upload 接收到的 object export const upload = (token, obj,next,error,complete) => { const { file } = obj // 关于 key 要怎么处理自行解决,但如果为 undefined 或者 null 会使用上传后的 hash 作为 key. const key = formatDate(new Date(),"yyyyMMddhhmmss") + getRandomInt(1000, 9999) // 因人而异,自行解决 const putExtra = { fname: "", params: {}, mimeType: [] || null }, // fname: string,文件原文件名 // params: object,用来放置自定义变量 // mimeType: null || array,用来限制上传文件类型,为 null 时表示不对文件类型限制;限制类型放到数组里: ["image/png", "image/jpeg", "image/gif"] config = { useCdnDomain: true, region: qiniu.region.z2 } let options = { quality: 0.92, noCompressIfLarger: true, maxWidth: 1000, maxHeight: 618 } qiniu.compressImage(file, options).then(data => { // 调用sdk上传接口获得相应的observable,控制上传和暂停 let observable = qiniu.upload(data.dist, key, token, putExtra, config); let subscription = observable.subscribe(next,error,complete); return subscription }).catch(res => { console.log(res) return res }) }
原 荐 Vue + ElementUI 如何优雅的上传文件到七牛OSS

著作权归作者所有

共有人打赏支持

上一篇: 花十分钟时间给JFinal写了个tio插件

下一篇: ElmentUI Select 有个坑要注意下


原 荐 Vue + ElementUI 如何优雅的上传文件到七牛OSS
小徐同学

粉丝 44

博文 11

码字总数 5432

作品 0

广州

程序员

提问

相关文章 最新文章

分享一个高性能灵活的多页面Vue脚手架

最近搭了个脚手架,主要特点是: 自由控制开发哪个项目,可单页可多页 可自由配置外部cdn 可上传至七牛或阿里的存储空间 性能高,灵活。 遂推荐一波,希望能帮助到有需要的小伙伴。 github:高...

Jerry12321

10/25

0

0

基于nuxt和iview搭建OM后台管理系统实践(4)-七牛上传组件的封装 目录结构 这是《基于nuxt和iview搭建OM后台管理系统实践》这一个系列文章的目录,大致思路如下: 简要介绍OM后台管理系统,以及开发环境 自行开发的公共组件,富文本quill[已完成]、地图、上...

愿爱无忧dk_

06/19

0

0


原 荐 Vue + ElementUI 如何优雅的上传文件到七牛OSS
mpvue开发小程序所遇问题及h5转化方案

项目结构 环境及依赖 less-loader,提供嵌套样式,谁用谁知道 flyio提供请求便于请求模块的快速转化h5(flyio提供了h5,小程序的请求封装,参考mpvue中提供的一个例子写拦截器,用于处理后台返回...

a独家记忆

06/23

0

0


原 荐 Vue + ElementUI 如何优雅的上传文件到七牛OSS
Vue+Koa+Mongodb 小练习

Vue+Koa+Mongodb 小练习 作者: Pawn 本文首发: Pawn博客 功能: 基于vue koa mongodb进行登录,注册,留言的简单网站。 体验地址: demo.lcylove.cn github: github.com/LiChangyi/d… 前面...

Pawn2018

09/19

0

0


原 荐 Vue + ElementUI 如何优雅的上传文件到七牛OSS
基于nuxt和iview搭建OM后台管理系统实践(5)-高德地图地块气象数据展示组件的封装 目录结构 这是《基于nuxt和iview搭建OM后台管理系统实践》这一个系列文

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:原 荐 Vue + ElementUI 如何优雅的上传文件到七牛OSS
本站链接:https://www.codesec.net/view/610672.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(83)