vue.js 实现上传图片 七牛云 后端 nodejs（方法1）

前端 vue.js 实现上传图片到七牛云的组件。

需要向后台拿上传凭证，后端是用node.js写的。

前端 代码如下：

<template>
    <div class="con">
    //这里的action，要对应你的bucket所在的服务区哈，我的是华南的。
        <form method="post" action="http://upload-z2.qiniup.com"
              enctype="multipart/form-data">
            <input name="token" type="hidden" v-model="uploadToken">
            <input name="file" type="file" />
            <input type="submit" value="上传文件" />
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            uploadToken: ''
        }
    },
    methods: {
    },
    created() {
        this.axios.get('/api/order/uploadToken')
        .then(res => {
            this.uploadToken = res.data.uploadToken
        })
    },
}
</script>

后端代码如下：

当然你先得 npm i qiniu然后才可以使用~
框架用的是express ，这部分就不讲了。

var qiniu = require("qiniu");


//获取七牛云的上传凭证
router.get('/uploadToken', (req, res) => {
    let accessKey = '你的accessKey'
    let secretKey = '你的secretKey'
    var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
    let bucket = 'produc-curtain'
    //要上传的空间
    var options = {
      scope: bucket,
      returnBody: '{"key":"$(key)","hash":"$(etag)","fsize":$(fsize),"bucket":"$(bucket)","name":"$(x:name)"}'
    };
    
    // 构建上传凭证
    var putPolicy = new qiniu.rs.PutPolicy(options);
    var uploadToken=putPolicy.uploadToken(mac);
    if(uploadToken){
        res.json({uploadToken})
    }
})