vue-qiniu

A Vue.js project

用法

input[type="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