vue java oss_Vue + ElementUI 如何优雅的上传文件到七牛OSS

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

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

2.引入七牛Java SDK

com.qiniu

qiniu-java-sdk

[7.2.0, 7.2.99]

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/

class="avatar-uploader"

action="http://upload.qiniup.com/"

:show-file-list="false"

:on-success="handleAvatarSuccess"

:before-upload="beforeAvatarUpload"

:http-request="uploadRequest"

>

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

})

}