const blobData = _this.dataURItoBlob(dataUrl, param.type);
resolve(blobData)
}
reader.onload = (e => { image.src = e.target.result; });
reader.readAsDataURL(param);
})
}
}
压缩图片实现起来比较简单。就是在beforeUpload()方法里面return一个Promise，Promise里面我们把图片的长度和宽度按比例进行缩小，并把图片画到canvas上，然后把canvas转成一个blod对象。
3.前端向后端请求上传token。
//upload.vue
upqiniu(param) {
let filetype = ''
if (param.file.type === 'image/png') {
filetype = 'png'
} else {
filetype = 'jpg'
}
const formdata = {
filetype: filetype,
param: param
}
this.actionGetUploadToken(formdata)
}// vuex/action.js
actionGetUploadToken({commit}, obj) {
const msg = {
filetype: obj.filetype
}
usersApi.getImgUploadToken(msg).then((response) => {
if(response.stateCode === 200) {
commit('uploadImg', {'token': response.token, 'key': response.key, 'param': obj.param})
}
}, (error) => {
console.log(`获取图片上传凭证错误：${error}`)
commit('uploadImgError')
})
},
4.后端生成上传token，并发给前端，我用Python实现。
filetype = data.get('filetype')
# 构建鉴权对象
q = Auth(configs.get('qiniu').get('AK'), configs.get('qiniu').get('SK'))# 生成图片名
salt = ''.join(random.sample(string.ascii_letters + string.digits, 8))
key = salt + '_' + str(int(time.time())) + '.' + filetype
# 生成上传 Token，可以指定过期时间等
token = q.upload_token(configs.get('qiniu').get('bucket_name'), key, 3600)
return Response({"stateCode": 200, "token": token, "key": key}, 200)
5.前端接收token，开始向服务器上传图片
// vuex/state.js
imgName: [], //图片名数组// vuex/mutations.js
uploadImg(state, msg) {
const config = {
useCdnDomain: true,
region: qiniu.region.z2
}
var putExtra = {
fname: msg.param.file.name,
params: {},
mimeType: ["image/png", "image/jpeg", "image/gif"] };
var observer = {
next(res){
},
error(err){
console.log(`图片上传错误信息：${err.message}`)
},
complete(res){
console.log(`图片上传成功：${res.key}`)
state.imgName.push(res.key)
}
}
var observable = qiniu.upload(msg.param.file, msg.key, msg.token, putExtra, config)
//上传开始
var subscription = observable.subscribe(observer)
},
6.上传成功以后，将图片名存入数据库
// 用到upload.vue的界面
this.imgsList = this.imgName.map(key => `http://${this.qiniuaddr}/${key}`)
