大文件上传之oss七牛云上传

一、注册账号

二、进行实名认证
三、找到对象存储
四、在空间管理进行新建空间

五、选择地区



存储区域表

存储区域	区域代码	客户端上传地址	服务端上传地址
华东	ECN	http(s)://upload.qiniup.com	http(s)://up.qiniup.com
华北	NCN	http(s)://upload-z1.qiniup.com	http(s)://up-z1.qiniup.com
华南	SCN	http(s)://upload-z2.qiniup.com	http(s)://up-z2.qiniup.com
北美	NA	http(s)://upload-na0.qiniup.com	http(s)://up-na0.qiniup.com
东南亚		http(s)://upload-as0.qiniup.com	http(s)://up-as0.qiniup.com

六、后台上传配置

实现思路

1.先下载qiniu这个模块

2.下载cors
3.在七牛云里面的空间设置里面设置跨域规则

4.使用get获取token
5.将token返回到前端

6.前端通过axios接口获取到token允许客户端上传
7.客户端设置文件名、参数类型、配置项、观察对象和监控状态
后台代码

var express = require('express');
const cors = require('cors')
const app = express();
const qiniu = require('qiniu')
//密钥
const { AccessKey, SecretKey } = require('./const')
app.use(cors())
app.get('/token', (req, res) => {
  const mac = new qiniu.auth.digest.Mac(AccessKey, SecretKey);
  const options = {
    //空间名
    scope: 'ossqinius',
  };
  const putPolicy = new qiniu.rs.PutPolicy(options);
  const token = putPolicy.uploadToken(mac);
  res.send({
    code: 200,
    data: token,
    msg: "success"
  })
})


app.listen(3000, () => {
  console.log('server is running on port 3000');
}
)

前端代码

 <input type="file" id="fileInput">
    <button onclick="upload()">上传文件</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
    <script>
        async function upload() {
            //获取id
            const fileInput = document.getElementById('fileInput')
            //获取单一文件
            const file = fileInput.files[0]
            //获取token
            const formData = new FormData()
            const { data } = await axios.get('http://localhost:3000/token')
            //服务器端的许可，客户端能够进行上传操作
            const token = data.data
            console.log(token);
            //文件名
            const key = file.name
            // 参数类型
            let putExtra = {
                fname: key,
                params: [],
                mimeType: ['image/png', 'image/jpeg', 'image/gif']
            }
            // 配置项
            let config = {
                //是否使用云空间这个域
                useCdnDomain: true,
                //空间对应的地区
                region: qiniu.region.z1,
            }
            // 观察对象，观察七牛上传完成后返回的数据
            let observable = qiniu.upload(file, key, token, putExtra, config)
            //监听状态
            let observer = {
                next(res) {
                    //成功的状态
                    console.log(res);
                },
                error(err) {
                      //失败的状态
                    console.log(err);
                },
                complete(res) {
                    //完整的状态
                    console.log(res);
                    //外部链接获取图片地址
                    const imgStc = `http:xxxxxx/${res.key}`
                    console.log(imgStc, 'igSrcm');
                }
            }
            //反馈信息的订阅操作
            observable.subscribe(observer)
        }
    </script>

注意：前端需要bootcdn获取加速的js链接