移动端二维码生成器

文章目录

• 0.体验
• 1.选择图片 输入标题和价格
• 2.生成二维码 可以保存 预览
• 3.扫描生成二维码 进入页面
• 4.git 地址
• 5.访问服务器目录下图片
• 5.上传图片
• 6 谁知跨域

0.体验

https://hongbin.xyz:3002

1.选择图片 输入标题和价格

---

2.生成二维码 可以保存 预览

---

3.扫描生成二维码 进入页面

4.git 地址

git仓库

注：只供学习使用

5.访问服务器目录下图片

// /public/images/filename.png
app.get("/public/images/*", function (req, res) {
  res.sendFile(__dirname + req.url);
});

5.上传图片

使用multer中间件后 formData数据中的文件在req.files 中 其他属性在req.body中

const express = require("express");
const app = express();
//文件保存目录
const dest = __dirname + "/public/images/";
const objMulter = multer({ dest });
app.use(objMulter.any());//任何类型的文件都接收

app.post("/uploadQRCode", (req, res) => {
  const {
    files: [{ filename, originalname }],
  } = req;
  console.log(req.files);
  // 以前的路径 现在的路径 回掉
  fs.rename(`${dest}${filename}`, `${dest}${originalname}`, async (err) => {
    if (err) {
      console.error("fs rename:", err);
      res.statusCode(500);
      res.end("文件保存失败");
    } else {
      const filePath = `${REQUEST.GET_IMAGE}${originalname}`;
      res.json(filePath);
    }
  });
});

6 谁知跨域

app.all("*", function (req, res, next) {
  //设置允许跨域的域名，*代表允许任意域名跨域
  res.header("Access-Control-Allow-Origin", "*");
  //允许的header类型
  res.header("Access-Control-Allow-Headers", "content-type");
  //跨域允许的请求方式
  res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
  if (req.method.toLowerCase() == "options") res.status(200).send();
  //让options尝试请求快速结束
  else next();
});