流程:
- 七牛云后台的对象存储功能
- node.js后台生成七牛云的token(或者直接从服务器获取),nodeJS获取方式参考最后
<template lang="pug">
//- 上传点击区域就可以由调用处决定
.upload-img-to-qi-niu.full.flex.relative
label.upload-img.full(for="inputId")
input(ref="upload-img" id="inputId" type="file" :accept="uploadAccept" @change="handleFileChange" style="display: none")
//- 选择图片后显示
img.local-photo.absolute(v-if="imgSrc" :src="imgSrc")
</template>
import * as qiniu from 'qiniu-js'
export default {
name: 'upload-img-to-qi-niu',
props: {
uploadAccept : {
type: String,
default: 'image/png,image/gif,image/jpeg,image/jpg'
}
},
data() {
return {
imgSrc: '',
};
},
methods: {
handleFileChange() {
const { files } = this.$refs['upload-img']
if (!files || !files.length) {
this.$toast('该图片不支持上传')
return
}
const file = files[0]
console.log('图片大小:'+file.size)
// if(file.size > 1024 * 1024 * 4) {
// this.$toast('图片大小不能超过 4MB!')
// return
// }
const URL = window.URL || window.webkitURL;
this.imgSrc = URL.createObjectURL(file)
const fileType = file.type
console.log(fileType,'文件类型')
if (this.uploadAccept.split(',').findIndex(t => t === fileType) === -1) {
this.$toast('请上传正确的图片格式')
return
}
this.$emit('file-change', { imgSrc: this.imgSrc ,file })
},
// 提供外部调用
// file
uploadToQiNiu({ uid, sid, file}) {
return new Promise((resolve, reject) => {
this.getQiNiuToken(uid, sid).then(({ token, domain }) => {
this.compressImg(file).then(dist => {
const observable = qiniu.upload(dist,Date.now() + file.name,token,
{
fname: '',
params: {},
mimeType: null
},
{
useCdnDomain: true,
region: qiniu.region.z0
}
)
// 上传开始
observable.subscribe({
complete(res) {
resolve( domain + res.key)
},
error(err) {
console.log('上传error: '+err)
reject(err.message)
}
})
})
})
})
},
// 从服务器获取七牛云token
getQiNiuToken (uid,sid) {
return this.$req('xxx/xxx', { uid, sid },'POST').then(res => res)
},
compressImg(file) {
return new Promise((resolve,reject) => {
const options = {
quality: 0.92,
noCompressIfLarger: true,
maxWidth: 1024,
maxHeight: 1024
}
return qiniu.compressImage(file, options).then(data => {
console.log('压缩图片结果: '+ data.dist)
resolve(data.dist)
}).catch((err) => {
console.log('压缩图片错误: '+ err)
reject(err)
})
})
},
}
};
</script>
使用
import uploadImgToQiNiu from '@/components/UploadImgToQiNiu'
.upload-box
upload-img-to-qi-niu(@file-change="onFileChange" ref="uploadComp")
.upload-desc 点击上传图片
onFileChange ({ file }) {
this.file = file
},
// 上传file到七牛云换取网络地址
getImgNetWorkUrl(file) {
return this.$refs.uploadComp.uploadToQiNiu({ uid, id,file }).then(screenshot => {
return Promise.resolve(screenshot)
})
},
onSummit () {
this.getImgNetWorkUrl(this.file).then(url => {
this.$req('xxx/uploda-url').then(() => {})
})
}
nodeJ生成token
- 注册七牛云,在个人中心---《秘钥》获取如下三个参数
// https://developer.qiniu.com/kodo/1289/nodejs
var accessKey = 'your access key';
var secretKey = 'your secret key';
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
var options = {
scope: bucket,
};
var putPolicy = new qiniu.rs.PutPolicy(options);
var uploadToken=putPolicy.uploadToken(mac);
其它自行查阅
归纳
- 通过input的file类型选择图片上传,获取图片的本地url路径file;
- 服务器一般只存储图片的网络地址,因此要将本地图片先上传到七牛云,换取网络地址后再将网络地址传递给服务器储存,具体步骤如下;
- 点击上传时,通过服务器获取七牛云存储的token,然后调用七牛云提供的上传图片的api,换取网络地址