您现在的位置是:首页 > 文章详情

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

日期:2018-11-06点击:469

** 本文的上传模式是前端直传七牛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 }) } 
原文链接:https://my.oschina.net/xiaoxustudent/blog/2872495
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章