fix: 完善图片上传功能，保存至OSS

app.js

@@ -1,71 +1,72 @@
-const createError = require('http-errors');
-const express = require('express');
-const path = require('path');
-const cookieParser = require('cookie-parser');
-const logger = require('morgan');
+const createError = require("http-errors");
+const express = require("express");
+const path = require("path");
+const cookieParser = require("cookie-parser");
+const logger = require("morgan");
 
 // 引入环境变量
-require('dotenv')
-  .config();
+require("dotenv")
+	.config();
 
 // 引入一个个路由模块
-const danmakuRouter = require('./routes/danmaku');
-const ipinfoRouter = require('./routes/ipinfo');
-const airportsubRouter = require('./routes/airportsub');
-const imgRouter = require('./routes/img');
-const schedule = require('./schedule/schedule');
-const DEBUG = process.env.DEBUG === 'true' || false;
+const danmakuRouter = require("./routes/danmaku");
+const ipinfoRouter = require("./routes/ipinfo");
+const airportsubRouter = require("./routes/airportsub");
+const imgRouter = require("./routes/img");
+const schedule = require("./schedule/schedule");
+const DEBUG = process.env.DEBUG === "true" || false;
 
 const app = express();
 
 // view engine setup
-app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'ejs');
-app.set('trust proxy', true);
+app.set("views", path.join(__dirname, "views"));
+app.set("view engine", "ejs");
+app.set("trust proxy", true);
 
-app.use(logger('dev'));
+app.use(logger("dev"));
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
 // 加载静态资源
-app.use(express.static(path.join(__dirname, 'public')));
-app.use('/assets', [
-  express.static(__dirname + '/node_modules/jquery/dist/'),
-  express.static(__dirname + '/node_modules/bootstrap/dist/'),
+app.use(express.static(path.join(__dirname, "public")));
+app.use("/assets", [
+	express.static(__dirname + "/node_modules/jquery/dist/"),
+	express.static(__dirname + "/node_modules/bootstrap/dist/"),
+	express.static(__dirname + "/node_modules/axios/dist/"),
 ]);
-app.use('/upload', express.static(__dirname + '/upload'));
+app.use("/upload", express.static(__dirname + "/upload"));
 
 // 加载路由
-app.use('/', danmakuRouter);
-app.use('/ipinfo', ipinfoRouter);
-app.use('/sub', airportsubRouter);
-app.use('/img', imgRouter);
+app.use("/", danmakuRouter);
+app.use("/ipinfo", ipinfoRouter);
+app.use("/sub", airportsubRouter);
+app.use("/img", imgRouter);
 
 // catch 404 and forward to error handler
 app.use(function (req, res, next) {
-  next(createError(404));
+	next(createError(404));
 });
 
 // error handler
 app.use(function (err, req, res) {
-  // set locals, only providing error in development
-  res.locals.message = err.message;
-  res.locals.error = req.app.get('env') === 'development' ? err : {};
+	// set locals, only providing error in development
+	res.locals.message = err.message;
+	res.locals.error = req.app.get("env") === "development" ? err : {};
 
-  // render the error page
-  res.status(err.status || 500);
-  res.render('error');
+	// render the error page
+	res.status(err.status || 500);
+	res.render("error");
 });
 
 if (!DEBUG) {
-  console.log('PRODUCTION MODE!该模式下TG机器人与定时任务正常运行');
-  // 引入TG机器人
-  require('./tgbot/tgbot');
-  // 引入定时任务模块
-  const schedule = require('./schedule/schedule');
-  schedule(app);
+	console.log("PRODUCTION MODE!该模式下TG机器人与定时任务正常运行");
+	// 引入TG机器人
+	require("./tgbot/tgbot");
+	// 引入定时任务模块
+	const schedule = require("./schedule/schedule");
+	schedule(app);
 } else {
-  console.log('DEBUG MODE!该模式下将关闭TG机器人与定时任务');
+	console.log("DEBUG MODE!该模式下将关闭TG机器人与定时任务");
 }
 
 module.exports = app;

routes/img.js

@@ -1,47 +1,63 @@
-const express = require('express');
+const express = require("express");
 const router = express.Router();
-const fs = require('fs');
+const fs = require("fs");
+const oss = require("../utils/oss");
 
-router.get('/', function (req, res) {
-  res.render('imgupload');
+//设置跨域访问
+router.all("*", function (req, res, next) {
+	res.header("Access-Control-Allow-Origin", "*");
+	res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+	res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
+	res.header("X-Powered-By", " 3.2.1");
+	next();
+});
+
+router.get("/", function (req, res) {
+	res.render("imgupload");
 });
 
 //图片上传
-var multer = require('multer');
+var multer = require("multer");
 var upload = multer({
-  dest: 'upload/',
-  fileFilter(req, file, callback) {
-    // 解决中文名乱码的问题
-    file.originalname = Buffer.from(file.originalname, 'latin1')
-      .toString(
-        'utf8'
-      );
-    callback(null, true);
-  }
+	dest: "upload/",
+	fileFilter(req, file, callback) {
+		// 解决中文名乱码的问题
+		file.originalname = Buffer.from(file.originalname, "latin1")
+			.toString(
+				"utf8"
+			);
+		callback(null, true);
+	}
 });
-router.post('/upload', upload.single('file'), function (req, res, next) {
-  // 完整URL路径
-  const path = req.protocol + '://' + req.headers.host;
-  //  文件路径
-  var fileName = req.file.filename;
-  // 构建图片名
-  var originalName = req.file.originalname;
-  // 图片重命名
-  fs.rename('upload/' + fileName, 'upload/' + originalName, (err) => {
-    if (err) {
-      res.json(JSON.stringify({
-        status: '102',
-        msg: '文件写入失败'
-      }));
-    } else {
-      var key = path + '/upload/' + originalName;
-      res.json({
-        status: '100',
-        msg: '上传成功',
-        key: key,
-        imgName: originalName
-      });
-    }
-  });
+router.post("/upload", upload.single("file"), async function (req, res, next) {
+	//  文件路径
+	var fileName = req.file.filename;
+	// 构建图片名
+	var originalName = req.file.originalname;
+	const localfilename = "upload/" + fileName;
+	const key = "upload/" + originalName;
+	const ret = await oss.putfile(key, localfilename);
+	oss.putACL(key);
+	res.json(ret);
+	// res.json({
+	// 	status: "100",
+	// 	msg: "上传成功",
+	// 	key: key,
+	// 	imgName: originalName
+	// });
 });
-module.exports = router;
+
+router.get("/search", async function (req, res, next) {
+	const objects = (await oss.list("upload/")).objects.map(
+		obj => {
+			let {lastModified,name,size,url} = obj;
+			name = name.replace("upload/","");
+			return {lastModified,name,size,url};
+		}
+	);
+	objects.sort((a,b) => {return b.lastModified>a.lastModified?1:-1;});
+
+	res.json(objects);
+});
+
+module.exports = router;

utils/oss.js

@@ -1,9 +1,11 @@
 const OSS = require("ali-oss");
+const path = require("path");
 const normalendpoint = "oss-cn-hongkong.aliyuncs.com";
 const fastendpoint = "oss-accelerate.aliyuncs.com";
 
 // 引入环境变量
-require("dotenv").config({path: "../.env"});
+require("dotenv")
+	.config({ path: "../.env" });
 
 let client = new OSS({
 	region: process.env.OSS_REGION,
@@ -21,9 +23,18 @@ async function get(objname) {
 	}
 }
 
+async function putfile(objname, localfilename, headers) {
+	try {
+		const res = await client.put(objname,path.normalize(localfilename),{headers});
+		return res;
+	} catch(e) {
+		console.log(e);
+	}
+}
+
 async function put(objname, content, headers) {
 	try {
-		const result = await client.put(objname, new Buffer.from(content), {headers});
+		const result = await client.put(objname, new Buffer.from(content), { headers });
 		return result;
 	} catch (e) {
 		console.log(e);
@@ -43,7 +54,8 @@ async function signurl(objname, isFast) {
 	try {
 		let result = await client.signatureUrl(objname);
 		if (isFast) {
-			result = result.replace("http://","//").replace(normalendpoint, fastendpoint);
+			result = result.replace("http://", "//")
+				.replace(normalendpoint, fastendpoint);
 		}
 		return result;
 	} catch (e) {
@@ -51,11 +63,30 @@ async function signurl(objname, isFast) {
 	}
 }
 
-module.exports = {get, put, head, signurl};
+async function list(prefix) {
+	const result = await client.list({
+		prefix,
+	});
+	return result;
+}
+
+async function putACL(key,acl = "public-read"){
+	client.putACL(key,acl);
+}
+
+module.exports = {
+	get,
+	put,
+	putfile,
+	head,
+	list,
+	signurl,
+	putACL
+};
 
 if (!module.parent) {
 	get("SUB/database.yaml");
 	put("SUB/test.txt", "中文");
 	head("SUB/database.yaml");
-	signurl("SUB/database.yaml",true);
+	signurl("SUB/database.yaml", true);
 }

views/imgupload.ejs

@@ -2,11 +2,56 @@
 <%- include('utils/header', {title}); %>
 <body>
 <div class="container">
-    <form action="/img/upload" method="post" enctype="multipart/form-data">
+    <form id="formId" action="/img/upload" method="post" enctype="multipart/form-data">
         <h2>单图上传</h2>
         <input type="file" name="file" accept=".jpg, .jpeg, .png, .hdr, .exr">
-        <input type="submit" value="提交">
+        <input id="submit" type="button" value="提交">
     </form>
+    <a id="search" class="btn btn-default">查询</a>
+    <p>
+        <h2>查询结果</h2>
+        <br>
+        原始名称：<span id="name"></span>
+        <br>
+        上传时间：<span id="lastModified"></span>
+        <br>
+        文件大小：<span id="size"></span>
+        <br>
+        图片地址：<a id="url" href=""></a>
+    </p>
 </div>
 </body>
+<script>
+    $('#search').click(function () {
+        $.ajax({
+            url: '/img/search',
+            type: 'get',
+            success: function (data) {
+              const {name, lastModified, size, url} = data[0];
+              $('#name').text(name);
+              $('#lastModified').text(lastModified);
+              $('#size').text(size);
+              $('#url').text(url).attr('href', url);
+            }
+        });
+    });
+    $("#submit").click(function () {
+      $.ajax({
+        url: '/img/upload',
+        type: 'post',
+        data: new FormData($('#formId')[0]),
+        processData: false,
+        contentType: false,
+        success: function (data) {
+          if (data.res.status === 200) {
+            alert("上传成功");
+          } else {
+            alert("上传失败");
+          }
+          console.log(data);
+        }
+      });
+      return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
+    });
+</script>
 </html>

views/utils/header.ejs

@@ -3,17 +3,15 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" type="image/png" sizes="16x16"  href="/favicons/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="theme-color" content="#ffffff">
-    <title><%= title %></title>
+    <title><%= title ;%></title>
     <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
     <script src="/assets/jquery.min.js"></script>
     <!-- bootstrap -->
     <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
     <script src="/assets/js/bootstrap.min.js"></script>
-    <!-- Cloudflare Web Analytics -->
-    <script defer src='https://static.cloudflareinsights.com/beacon.min.js'
-            data-cf-beacon='{"token": "938fe927c5c44a888fb536713a2f1025"}'></script>
-    <!-- End Cloudflare Web Analytics -->
+    <!-- axios-->
+    <script src="/assets/axios.min.js"></script>
 </head>