Vue 使用云存储（七牛云）

前言

项目将数据与应用混在一起，不利于对系统进行维护。可以考虑如下场景：

         1、希望通过 CDN 加速来提高图片资源的访问速度

        2、服务器存储满了，需要多图片等文件资源做迁移，但是服务不能中断，域名不能变化 …

        通过数应分离思想，就可以解决以上问题。 几乎所有系统都会涉及到图片、视频等资源的上传和管理；项目中使用存储图片、视频的云存储 数应分离后，可以将图片等文件资源独立出来，存储到云端。常见的云有阿里云、腾讯云、 华为云、七牛云等。本次以七牛云提供的 OSS 存储服务为基础，通过 Node 搭建后 端业务服务器，通过 Vue 构建用户端。

服务端：

app.js

const express = require('express')
const app = express();
const qiniu = require('./qiniu')

// 创建上传凭证
app.get('/token', (req, res) => {
    let token = new qiniu().uploadToken();
    // console.log(token);
    res.status(200).send(token);
})
// app.post('/deletes',(req,res)=>{

// })

app.get('/test', (req, res) => {
    let result = {
        msg: 'ok'
    }
    res.send(result)
})
app.listen(3000, () => {
    console.log('server running at http://127.0.0.1:3000');
})

qiniu.js

const sdk = require('qiniu');
// https://developer.qiniu.com/kodo/1289/nodejs
class qiniu {
    constructor() {
        this.accessKey = '';//此处填写公钥
        this.secretKey = '';//私钥
        this.options = {
            scope: 'leviash',
            expires: 7200
        }
    }
    //创建上传凭证
    uploadToken() {
        let mac = new sdk.auth.digest.Mac(this.accessKey, this.secretKey);
        let putPolicy = new sdk.rs.PutPolicy(this.options);
        let uploadToken = putPolicy.uploadToken(mac);
        return uploadToken;
    }

    // deleteFile() {
    //     let mac = new qiniu.auth.digest.Mac(this.accessKey, this.secretKey);
    //     let config = new qiniu.conf.Config();
    //     //config.useHttpsDomain = true;
    //     config.zone = qiniu.zone.Zone_z2; // 华南
    //     let bucketManager = new sdk.rs.BucketManager(mac, config);

    //     let bucket = 'leviash';
    //     let key = 'fileWed Nov 16 2022 19:52:12 GMT+0800 (中国标准时间)54.';// 传递文件名

    //     bucketManager.delete(bucket, key, function (err, respBody, respInfo) {
    //         if (err) {
    //             console.log(err);
    //             //throw err;
    //         } else {
    //             console.log(respBody, respInfo) // 最后还是res.end
    //         }
    //     });
    // }
}
module.exports = qiniu

运行服务端

        node app

客户端：

组件QiNiuUpload.vue

App.vue配置

main.js

import Vue from 'vue'
import App from './App.vue'
// 引入 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 挂载 axios
import Axios from 'axios'
// Axios.defaults.baseURL='http://localhost:3000';
Vue.prototype.$http=Axios;
Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

运行

运行客户端

上传成功