vue-qiniu v1.0.0
vue-qiniu
A Vue.js project
用法
inputtype="file" change事件触发后,先去(如果是图片,可以同时通过FileReader以及readAsDataURL将图片预览在页面上)后台请求七牛的上传token,将拿到的token和key以及通过change传递过来的files一起append到formData中。然后将formData通过post传递给七牛,七牛在处理后将返回真正的文件地址
获取TOKEN
const qiniu = require('qiniu') const crypto = require('crypto') const Config = require('qiniu-config')
exports.token = function() { //构建一个保存文件名 //这里没有处理文件后缀,需要自己传递过来,然后在这里处理加在key上,非必须 const key = crypto.createHash('md5').update(((new Date()) 1 + Math.floor(Math.random() * 10).toString())).digest('hex') //Config 七牛的秘钥等配置 const ACCESS_KEY, SECRET_KEY, BUCKET = Config.accessKey, Config.secretKey, Config.bucket qiniu.conf.ACCESS_KEY = ACCESS_KEY qiniu.conf.SECRET_KEY = SECRET_KEY const upToken = new qiniu.rs.PutPolicy(BUCKET + ":" + key) try { const token = upToken.token() return this.body = { key: key, token: token } } catch (e) { // throw error } }
//假设api 地址是 /api/token 上传组件 UPLOAD.VUE
const formData = new FormData()
formData.append('file', file)
//获取token
this.$http.get(`/api/token/`)
.then(response => {
const result = response.body
formData.append('token', result.token)
formData.append('key', result.key)
//提交给七牛处理
self.$http.post('https://up.qbox.me/', formData, {
progress(event) {
//传递给父组件的progress方法
self.$emit('progress', parseFloat(event.loaded / event.total * 100), flag)
}
})
.then(response => {
const result = response.body
if (result.hash && result.key) {
//传递给父组件的complete方法
self.$emit('complete', 200 , result, flag)
//让当前target可以重新选择
event.target.value = null
} else {
self.$emit('complete', 500, result, flag)
}
}, error => self.$emit('complete', 500, error.message), flag)
})
}
}
}
}
相比于FILEApi 或者其他上传组件,这种方法代码量最小。但是缺点也是显而易见的,大量html5 API的使用,势必会回到兼容性这个老大难上来,慎重的选择性使用吧
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
7 years ago