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 }) }