vue项目上传图片到Linux服务器并预览

最新推荐文章于 2024-08-19 11:22:29 发布

吃瓜群众欢乐多

最新推荐文章于 2024-08-19 11:22:29 发布

阅读量1.5k

点赞数 1

分类专栏：阿里云 nginx VUE

本文链接：https://blog.csdn.net/sinat_36146776/article/details/95654711

版权

VUE 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

阿里云

14 篇文章 0 订阅

订阅专栏

nginx

4 篇文章 0 订阅

订阅专栏

上传

.vue

<form action="/api/upload" method="post" enctype="multipart/form-data">
      <input type="file" name="logo">
      <input type="submit" value="提交">
    </form>

file.js

const express = require('express')
const router = express.Router()
const db = require('./db.js')
const Tools = require('../utils/index');
const multer = require('multer');//upload
//设置上传地址/jane-file/img下 , Tools.getNowTimeStamp()是获取当天的日期
const storage = multer.diskStorage({
  destination: `/jane-file/img/${Tools.getNowTimeStamp()}`,
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  }
});
let upload = multer({
  storage: storage
});
//上传到服务器并将图片的地址保持到数据库中
router.post('/upload', upload.single('logo'), (req, res, next)=> {
  let sql = `INSERT INTO file(filename,path,type,size) VALUES 
  (${JSON.stringify(req.file.filename)},${JSON.stringify(req.file.path)},
  ${JSON.stringify(req.file.mimetype)},${JSON.stringify(req.file.size)})`;
  db.query(sql,(err,rows)=>{
    if(err){
      res.send(err)
    }else{
      let result = {
        code:0,
        message:'OK',
        data:rows,
        fileInfo:req.file,
        status:true
      };
      res.send(result);
    }
  });
});
//获取所有图片
router.use('/getFileList',(req,res)=>{
  let sql = `SELECT * FROM file`;
  db.query(sql,(err,rows)=>{
    if(err){
      req.send(err)
    }else{
      let result = {
        code:0,
        message:'OK',
        data:rows,
        status:true
      }
      res.send(result);
    }
  })
})
module.exports = router;

注意name一定要相等

预览

配置nginx

    # nginx.conf
	  http {
	    # others
	    server {
	        listen       8088 ssl;
	        server_name  localhost;
	        root         /;
	
	        ssl_certificate      /jane-soft/https/2426128_www.zhangxiaojuan.club.pem;
	        ssl_certificate_key  /jane-soft/https/2426128_www.zhangxiaojuan.club.key;
	
	        ssl_session_cache    shared:SSL:1m;
	        ssl_session_timeout  5m;
	
	        ssl_ciphers  HIGH:!aNULL:!MD5;
	        ssl_prefer_server_ciphers  on;
	
	        # Load configuration files for the default server block.
	        include /etc/nginx/default.d/*.conf;
	
	        error_page 404 /404.html;
	            location = /40x.html {
	        }
	
	        error_page 500 502 503 504 /50x.html;
	            location = /50x.html {
	        }
	    }
    }

配置成功后，通过服务器地址https://47.XXX.XXX.87:8088/jane-file/images/2019-7-17/5ac1ba75-804c-4e22-9744-af4f789e71fe.png即可访问到服务器上的文件