准备工作
进入七牛云官网 注册账号 → 绑定邮箱 → 完成认证
登录七牛云 → 点击右上角头像 → 进入个人中心 → 进入密钥管理 -> 复制AK和SK（待会儿要用到）
点击左上角列表按钮 → 展开产品浮层 → 点击对象存储Kodo → 进入空间管理 → 新建空间 → 记住存储空间名称（待会儿要用到）→ 记住存储区域（就近选择，待会儿要用到） → 访问控制选择公开
七牛云的主要操作步骤（仅仅是主要步骤）
登录七牛云 → 点击右上角导航 → 选择文档 → 进入开发者中心 → 点击左上角导航SDK&工具 → 进入官方SDK → 找到nodejs(服务端) → 进入文档
- 第一步：安装qiniu
npm install qiniu然后导入qiniuconst qiniu = require("qiniu") - 第二步：根据文档操作 首先配置AK/SK/bucket
- 第三步：根据文档 找到构建配置类
- 第四步：根据文档 找到文件上传
图片上传的全部流程（使用七牛云）
其中public文件夹 用于在本地服务器暂存上传的图片 等上传到云端后 在本地就会删除 使用了fs.unlink
搭建服务器 一级路由 (server.js)
const express = require('express')
const app = express()
//使用cors解决跨域
const cors = require('cors')
app.use(cors())
// 一级路由
app.use("/admin",require("./router/index.js"))
//开放静态资源
app.use(express.static('public'))
app.listen(8080);
搭建二级路由 (./router/index.js)
const router = require('express').Router()
// 二级路由
router.use("/upload",require("./upload.js"))
module.exports = router
搭建三级路由 以及图片上传流程 (./router/upload.js)
const router = require('express').Router()
const { v4: uuidv4 } = require('uuid'); //使用uuid为上传到云端的文件命名为全球唯一
const path = require("path") //在获取本地服务器暂存图片的路径以及获取上传图片的文件后缀名时用到
const fs = require("fs") //在删除本地服务器暂存的图片时用到
//导入 multer
const multer = require("multer") //在配置本地服务器存储空间时用到
// 导入 qiniu
const qiniu = require("qiniu")
// 配置三个空间
var accessKey = 'oW3ATfjdb1EcK214vQy0Prf5Q9DcWu_IHFZgntFC';
var secretKey = 'u0FklSLJyfg9F7R2Zbp9teid_OEgeZGIMPS0UCII';
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
var options = {
scope: "bingmin",
};
var putPolicy = new qiniu.rs.PutPolicy(options);
var uploadToken = putPolicy.uploadToken(mac);
// 构建配置类
//七牛云的地址
var config = new qiniu.conf.Config();
// 空间对应的机房
config.zone = qiniu.zone.Zone_z2;
//图片上传 => 配置存储(配置仓库)
const storage = multer.diskStorage({
//存储路径
destination(req, file, cb) {
cb(null, "public")
},
//存储名称
filename(req, file, cb) {
// 将存储的图片的命名为全球唯一 path.extname(file.originalname) 获取上传的文件的后缀名
cb(null, uuidv4() + path.extname(file.originalname))
}
})
//实现存储
const storageInfo = multer({ storage })
//三级路由 =>
router.post("/file", storageInfo.single('img'), (req, res) => {
// console.log(req);
// 图片上传
var localFile = req.file.path;
var formUploader = new qiniu.form_up.FormUploader(config);
var putExtra = new qiniu.form_up.PutExtra();
// 文件上传
formUploader.putFile(uploadToken, null, localFile, putExtra, function (respErr,
respBody, respInfo) {
if (respErr) {
throw respErr;
}
//七牛云服务器给你的服务器响应成功,那么就把public里面的图片给删除
if (respInfo.statusCode == 200) {
fs.unlink(localFile, (err) => {
if (err) console.log("删除图片失败");
console.log("删除图片成功");
})
res.send({
code: 200, msg:`http://s0ibcpwei.hn-bkt.clouddn.com/${respBody.hash}`})
} else {
console.log(respBody);
}
});
})
前端页面 (web/index.html)
<body>
<!-- 服务器就是根据name=>获取前端的信息 -->
<form>
<label>
<img src="../img/默认图片.jpg" alt="">
<input type="file" name="img">
</label>
</form>
<script>
/*
文件上传前端 =>
1.post请求
2.FormData=>提交给ajax
*/
const inpELe = document.querySelector("input")
const imgELe = document.querySelector("img")
// change事件 意味着图片点击了上传图片
inpELe.onchange = function () {
//校验 =>
// console.dir(inpELe.files[0].name)
// 获取上传的图片的文件名
const filename = inpELe.files[0].name;
// 限制图片类型
if (!filename.endsWith("jpg")) return alert("请上传jpg格式的图片")
const formEle = document.querySelector("form")
const fm = new FormData(formEle);
//校验之后,打算上传
const xhr = new XMLHttpRequest()
xhr.open("post", "http://localhost:8080/admin/upload/file")
xhr.send(fm)
xhr.onload = function () {
const res = JSON.parse(xhr.responseText)
if (res.code == 200) {
// 获取图片路径
imgELe.src = res.msg
}
}
}
</script>
</body>