项目性能优化之七牛云对象存储

前端:

        安装第三方包：

pnpm i qiniu-js

        前端代码：

<div>
    <input type="file" ref="fileInput" />
    <button @click="uploadFun">上传文件</button>
</div>
<script setup lang="ts">
import * as qiniu from 'qiniu-js'
import { ref } from 'vue'
    
const fileInput = ref<HTMLInputElement | null>(null)

async function uploadFun() {
    const file = fileInput.value.files[0]
    console.log(file, 'files')

    const result = await getUploadToken()
    console.log(result, 'result')
    const token = result.data
    const key = file.name
    const putExtra = {
        fname: key,
    }
    const config = {
        useCdnDomain: true,
        region: qiniu.region.z1,
    }

    const observable = qiniu.upload(file, key, token, putExtra, config)

    const observer = {
        next(res) {
            console.log(res)
        },
        error(err) {
            console.log(err, 'err')
        },
        complete(res) {
            console.log(res, 'res')
        },
    }
    observable.subscribe(observer)
    // 在项目中，根据不同组件(执行环境)需要不同的返回值。
    // 在react + antd-mobile + ImageUploader 图片上传中，需要返回一个Promise对象，并且该对象中需要拥有url属性。
    // return Promise.resolve({url:'XXXXXX'})
}
</script>

        注意事项:

        在项目中，根据不同组件(执行环境)需要不同的返回值。

后端：

        安装第三方包：

pnpm i qiniu

        config/index.js

module.exports = {
    Ak:'',
    Sk:'',
}

        routes/upload.js

var express = require('express');
var router = express.Router();
// 七牛云模块
const qiniu = require('qiniu')
const {Ak,Sk} = require('../config/index')

router.get('/uploadToken',(req,res)=>{
    // 构建鉴权对象
    const mac = new qiniu.auth.digest.Mac(Ak, Sk);
    const options = {
        scope: 'nvb-blog',
    };
    const putPolicy = new qiniu.rs.PutPolicy(options);
    const uploadToken = putPolicy.uploadToken(mac);
    res.json({
        code:200,
        data:uploadToken,
        msg:"success"
    })
})

module.exports = router