mongoose登录鉴权以及图片如何Upload上传

J轩

已于 2023-06-20 11:01:23 修改

阅读量154

点赞数

文章标签：前端 npm javascript

于 2023-05-16 19:48:34 首次发布

本文链接：https://blog.csdn.net/zc_123_/article/details/130712689

版权

文章讲述了如何在Node.js后端使用jsonwebtoken进行用户登录验证，生成并发送token，以及使用express-jwt进行token验证。同时，文章还介绍了前端如何上传图片，包括后端接收图片并返回URL，以及前端展示预览和处理上传结果。

摘要由CSDN通过智能技术生成

npm i jsonwebtoken

var jwt = require('jsonwebtoken')
router.post('/islogin', async function (req, res, next) {
  let body = req.body
  let data = await loginsModel.find({ mobile: body.mobile })
  if (data.length > 0) {
    //生成token
    let token = 'Bearer ' + jwt.sign(body, 'cwj', { expiresIn: '1h' })
    res.send({
      token,
      code:200
    })
  }
  else{
    res.send({
      code:111
    })
  }

});

npm i express-jwt

// const expressJWT = require('express-jwt')
// app.use(expressJWT({
//   secret:'cwj',
//   //加密方式
//   algorithms:["HS256"]
// }).unless({
//   //不需要token验证
//   path:["/islogin",{url:/^\/upload/,methods:["GET"]}]
// }))

后端上传图片

// var multiparty = require('multiparty');

//var jwt = require('jsonwebtoken') /* 图片上传 */
// router.post('/getImg', async function (req, res, next) {
//   /* 创建multiparty表单对象 */
//   const form = new multiparty.Form()
//   /* 针对multiparty的表单对象 配置上传路径(目录) */
//   form.uploadDir = 'upload'
//   /* 通过parse方法解析表单数据 */
//   form.parse(req, (err, formData, imgData) => {
//     /* 将接收到的文件信息 传回到客户端 */
//     res.send({
//       imgUrl: imgData.file[0].path
//     })
//   })
// })

app.js创建upload文件

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('/upload',express.static('upload'))

前端上传图片html

<Upload
    action="/api/getImg"
    listType="picture-card"
    onPreview={handlePreview}
    onChange={(e) => handleChange(e)}
>
     {imageUrl ? (
        <img
         src={imageUrl}
         alt="avatar"
         style={{width: '100%'}}
        />) : (uploadButton)}
</Upload>

前端上传图片js

  //预览图片
  const handlePreview = async (file: UploadFile) => {
    let src = file.url as string;
    if (!src) {
      src = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.readAsDataURL(file.originFileObj as RcFile);
        reader.onload = () => resolve(reader.result as string);
      });
    }
    const image = new Image();
    image.src = src;
    const imgWindow = window.open(src);
    imgWindow?.document.write(image.outerHTML);
  };

  //上传/删除图片
  const handleChange = (e: any) => {
    console.log(e, '000000');
    console.log(e.file.response);
    if (e.file.status == 'uploading') {
    }
    if (e.file.status == 'done') {
      setArr([...arr, e.file.response]);
    }
    else if (e.file.status == 'removed') {
      let ss = arr.filter(i => { return i.path != e.file.response.path })
      console.log(ss, 'ss');
      setArr(ss)
    }
  }
  const uploadButton = (
    <div>
       <PlusOutlined />
       <div
          style={{marginTop: 8}}
       >
          Upload
       </div>
    </div>
);