Vue + ElementUI 如何优雅地将文件上传到七牛 OSS
最编程
2024-05-01 21:19:38
...
动弹” 回归,赶紧下载 APP 愉快地摸鱼吧!”
** 本文的上传模式是前端直传七牛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
})
}