node上传文件到个人七牛云

最近公司项目需求比较少，终于有时间闲下了学习点新的。前段时间研究了框架koa2, 刚好有一些文件需要上传到七牛云，趁热打铁，结合koa2框架看看如何上传文件到七牛。

先上效果图

前端

前端渲染用到Vue, 监听input(file) 的change事件, 表单上传使用FormData

<div class="form-action clearfix">
    <a class="zh-btn zh-btn--primary">
        上传图片
        <input class="native-input-file" type="file" name="file" @change="onChangeFile"/>
    </a>
</div>

var vm = new Vue({
        delimiters: ['${', '}'],
        el: '#app',
        data: {
            lists: [],
            cache: {},
            content: '',
            editing: true,
            alert: {
                show: false,
                text: '',
                type: 'success',
                time: 3000
            },
            timer: null,
            file: null,
            fileUrl: ''
        },

        computed: {
            className () {
                return `zh-alert--${this.alert.type}`
            }
        },

        watch: {
            'alert.show' (curr) {
                if (curr) {
                    if (this.timer) {
                        clearTimeout(this.timer)
                    }
                    this.timer = setTimeout(() => {
                        this.alert.show = false
                    }, this.alert.time)
                }
            }
        },

        created() {
        },

        methods: {
            onChangeFile (e) {
                this.file = e.target.files[0]
                console.log(this.file)
                if (this.file) {
                    this.uploadFile()
                }
            },

            uploadFile () {
                let _formData = new FormData()
                _formData.append('file', this.file)
                axios.post('/api/upload', _formData, {
                    // 设置header为multipart/form-data
                    headers: {
                        'Content-type': 'multipart/form-data'
                    }
                }).then(res => {
                    let result = res.data
                    if (result.status === 0) {
                        this.fileUrl = result.data.imgUrl
                    }
                })
            },

            showToast (text = '', type = 'success', show = true, time = 3000) {
                this.alert = { show, text, type, time }
            }
        }
    })

后端

后端处理是先将文件上传到node，在上传文件至七牛云

文件上传到node

这里用到了busboy, 一个转换表单数据的库，接着就是读写文件到node服务相应目录下

/**
 * 上传到本地
 */
const uploadLocal = (ctx, options) => {
    const _emmiter = new Busboy({headers: ctx.req.headers})
    const fileType = options.fileType
    const filePath = path.join(options.path, fileType)
    const confirm = fsUtil.mkdirsSync(filePath)
    if (!confirm) return
    return new Promise((resolve, reject) => {
        _emmiter.on('file', function (fieldname, file, filename, encoding, mimetype) {
            const fileName = Rename(filename)
            const saveTo = path.join(path.join(filePath, fileName))
            file.pipe(fs.createWriteStream(saveTo))
            file.on('end', function () {
                resolve({
                  imgPath: `/${fileType}/${fileName}`,
                  imgKey: fileName
                })
            })
        })

        _emmiter.on('finish', function () {
            console.log('finished...')
        })

        _emmiter.on('error', function (err) {
            console.log('err...')
            reject(err)
        })
        ctx.req.pipe(_emmiter)
    })
}

node上传文件到七牛云

这个网上的例子很多，很多例子比较旧，最好的还是看官方的文档。七牛node传送门

先解释几个概念, 可以单独放在你的配置文件中

const config = {
    qiniuConfig: {
        accessKey: '你的七牛accessKey',
        secretKey: '你的七牛secretKey',
        bucket: '你的七牛存储空间名字',
        origin: '外链域名'
    }
}

accessKey/secretKey

bucket

1 上传代码

/**
 * 上传到七牛
 */
const uploadToQiniu = (filePath, key) => {
    const { accessKey, secretKey, bucket } = qiniuConfig
    let mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
    let options = {
        scope: bucket
    }
    let putPolicy = new qiniu.rs.PutPolicy(options)
    let uploadToken = putPolicy.uploadToken(mac)

    const config = new qiniu.conf.Config()
    // 空间对应的机房
    config.zone = qiniu.zone.Zone_z0
    const localFile = filePath
    const formUploader = new qiniu.form_up.FormUploader(config)
    const putExtra = new qiniu.form_up.PutExtra()
    // 文件上传
    return new Promise((resolve, reject) => {
        formUploader.putFile(uploadToken, key, localFile, putExtra, (respErr, respBody, respInfo) => {
            if (respErr) {
                reject(respErr)
            }
            if (respInfo.statusCode == 200) {
                resolve(respBody)
            } else {
                resolve(respBody)
            }
        })
    })
}

这个注意：qiniu.zone.Zone_z0是你存储空间的对应的机房, 测试时候发现，填错七牛会提示你是哪个机房