69 解决multer上传文件乱码 文件上传 文件下~载 res.download(path) 图片转base64

1.解决代码文件名等乱码

var express = require('express');
var path = require('path');
var router = express.Router();
const multer = require('multer');

//multer配置:配置自动换成文件本来的名字
// const upload = multer({ dest: '/uploads' })

const upload = multer({
  // 文件上传的位置
  // dest: path.join(__dirname, "../public/uploads"),
  fileFilter(req, file, callback) {
    // 解决中文名乱码的问题 latin1 是一种编码格式
    file.originalname = Buffer.from(file.originalname, "latin1").toString(
      "utf8"
    );
    callback(null, true);
  },
  storage: multer.diskStorage({
    //上传文件的目录
    destination: path.join(__dirname, '../public/uploads/'),//上传的相对路径
    //上传文件的名称
    filename: function (req, file, cb) {
      cb(null, decodeURI(file.originalname))
    }
  })
});

// 单文件上传接口     fd.append('file', e.target.files[0]) single中键名要与这里一致
router.post('/file', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.send('ok')
})

module.exports = router;

乱码前效果

不乱码之后的效果 

2.文件上传 

 ***  存储静态文件 ***

注意注意注意：express 在指定的静态目录中查找文件，并对外提供资源的访问路径

因此，存放静态文件的目录不会出现在url中

例如：pulic目录下的image.png 请求路径为 127.0.0.1:3000/image.png

app.use(express.static(path.join(__dirname, 'public')));

磁盘存储模式 ：将文件存入静态资源文件夹

  
 // 

script-------------------------------------------------

 const inputfile = document.getElementById('file')

 axios.defaults.baseURL = 'http://127.0.0.1:3000'

  inputfile.addEventListener('change', async (e) => {
      const fd = new FormData()
      fd.append('file', e.target.files[0])
      const { data: res } = await axios.post('/file', fd, {
        //因为axios默认是Content-Type为json，所以需要修改
        headers: {
          'Content-Type': 'multipart-form-data'
        }
      })
      console.log(res);
    })

后端代码-------------------------------------------------
var express = require('express');
var path = require('path');
var router = express.Router();
const db = require('../db.js')
const multer = require('multer');

const upload = multer({
  // 文件上传的位置
  // dest: path.join(__dirname, "../public/uploads"),
  fileFilter(req, file, callback) {
    // 解决中文名乱码的问题
    file.originalname = Buffer.from(file.originalname, "latin1").toString(
      "utf8"
    );
    callback(null, true);
  },
  storage: multer.diskStorage({
    //上传文件的目录
    destination: path.join(__dirname, '../public/uploads/'),//上传的相对路径
    //上传文件的名称
    filename: function (req, file, cb) {
      cb(null, decodeURI(file.originalname))
    }
  })
});

// 单文件上传接口     fd.append('file', e.target.files[0]) single中键名要与这里一致
router.post('/file', upload.single('file'), (req, res) => {
  const sql = 'insert into api_store_img set ?'
  const mysql = {
    image_src: path.join('http://127.0.0.1:3000', 'uploads', req.file.originalname)
  }
  db.query(sql, mysql, (err, result) => {
    if (err) return res.send('上传文件失败！')
    if (result.affactRows === 1) {
      res.send('上传文件成功！')
    }
  })
})

 内存存储模式：存储buffer文件

buffer文件下载时会有点问题---------------------------------------

var express = require('express');
var path = require('path');
var router = express.Router();
const db = require('../db.js')
const multer = require('multer');

//-----------------第三种：内存存储模式------------------------------
const storage = multer.memoryStorage()
const upload = multer({ storage: storage })

// 单文件上传接口     fd.append('file', e.target.files[0]) single中键名要与这里一致
router.post('/memoryfile', upload.single('file'), (req, res) => {
  const sql = 'insert into api_store_img set ?'
  const data = { value: req.file.buffer }
  db.query(sql, data, (err, result) => {
    if (err) return res.cc(err)
    if (result.affectedRows !== 1) return res.cc('请求失败！')
    res.send('ok')
  })
})

//文件下载
router.get('/dw', (req, res) => {
  const sql = 'select * from api_store_img where id=6'
  db.query(sql, (err, result) => {
    if (err) return res.cc(err)
    //res.set设置响应头  filename.jpeg  可以修改
    res.set({
      "Content-Type": "image/jpeg",
      "Accept-Ranges": 'bytes',
      "Content-Disposition": 'attachment;filename=filename.png'
    })
    res.send(result.value)
  })
})

module.exports = router;

3.图片转base64

1.input:file  上传图片


2.使用 FileReader对象转base64

var file = document.querySelector('input[type=file]').files[0];

var reader = new FileReader();//创建FileReader实例
reader.readAsDataURL(file);//将图片文件转为base64

reader.onloadend = function () {  //图片转换完成的回调
    var base64 = reader.result; 
    console.log(base64);
}

4.文件下载

//文件下载
router.get('/download', (req, res) => {
  const filepath = path.join(__dirname, '../public/uploads/small.png')
  res.download(filepath)
})