冰凌汇编

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 45|回复: 0
收起左侧

[Vue.JS] node+express+multer实现单个或多个图片文件,视频文件上传

[复制链接]
Margot 发表于 2022-8-23 23:43:22
一、multer
官方介绍:Multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,它主要用于上传文件。它是写在 busboy 之上非常高效。
中文官方网址:multer/README-zh-cn.md at master · expressjs/multer · GitHub
怎么使用就不介绍了,官方文档很详细
二、使用
1.单个文件(图片或视频都可以)上传
前端代码:
[JavaScript] 纯文本查看 复制代码
<input type="file" ref="file1" @change="fileChange1"/>

自己封装的向后端发送请求的函数:
[JavaScript] 纯文本查看 复制代码
// 导入自己封装的axios请求实例
import request from '../tools/request'
export const addArticle = data => {
  return request({
    method: 'post',
    url: '/my/addActicle',
    // url: '/my/addActicle2',
    // url: '/my/addActicle3',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data
  })
}

vue代码:
[JavaScript] 纯文本查看 复制代码
<script>
//导入自己向后端发送请求的函数
import { addArticle } from '../../request/article'
export default {
  data() {
    return {
      article: {
        title: '文章标题',
        cate_id: 1,
        content: '这是文章内容测试',
        state: '草稿'
      }
    }
  },
  methods: {
    async fileChange1() {
      //读取文件对象,并基于文件对象获取blob数据
      const file = this.$refs.file1.files[0]
       //为对象添加cover_img属性用来保存文件
      this.article.cover_img = file
      //向后端发送请求
      await addArticle(this.article)
    }
  }
}
</script>

浏览器查看自己的发送参数:
node+express+multer实现单个或多个图片文件,视频文件上传 - Margot_冰凌汇编

后端路由代码:
[JavaScript] 纯文本查看 复制代码
const multer = require('multer')
//创建multer的实例对象,通过dest属性指定文件的存放路径
const upload = multer({ dest: path.join(__dirname, '../uploads') })
//'cover_img'为前端存储文件的属性名,必须一致
router.post('/addActicle', upload.single('cover_img'), addActicle)

自己封装的将后端接收到文件保存文件夹中:
[JavaScript] 纯文本查看 复制代码
//文章路由处理函数
const fs = require('fs')
const path = require('path')
function saveImg(file, sign) {
  return new Promise((resolve, reject) => {
    fs.readFile(file.path, async (err, data) => {
      if (err) {
        reject(err)
      }
      // 拓展名
      let extName = file.mimetype.split('/')[1]
      // 拼接成图片名
      // 这里可以自行修改
      let imgName = `${sign}-${Date.now()}.${extName}`
      // 写入图片
      // 写入自己想要存入的地址
      await fs.writeFile(path.join(__dirname, `../upload/${imgName}`), data, err => {
        //写入失败
        if (err) { reject(err) }
        //写入成功,同时返回需要存储在数据中的相对路径
        resolve(`/upload/${imgName}`)
      })
      // 删除二进制文件
      await fs.unlink(file.path, err => {
        if (err) { reject(err) }
      })
    })
  })
}

后端路由处理函数代码:
[JavaScript] 纯文本查看 复制代码
exports.addActicle = (req, res) => {
  // console.log(req.body);//文本类型的数据
  // console.log(req.file);//文件类型的数据
  let file = req.file
  console.log('通过multer解析文件信息对象', file);
  saveImg(file, req.user.username).then(res => {
    // res就是我返回的相对地址的位置
    console.log(res);
  }).catch(err => {
    // 啊....啊 最苦恼的bug环节
    console.log(err);
  })
}

后端接收成功:
node+express+multer实现单个或多个图片文件,视频文件上传 - Margot_冰凌汇编

2.多个文件(图片或视频都可以)上传 (需要使用FormData来存储表单数据)
第一种方式
前端代码:

[JavaScript] 纯文本查看 复制代码
<input type="file" ref="file1" @change="fileChange1" multiple />

自己封装的向后端发送请求的函数:
[JavaScript] 纯文本查看 复制代码
// 导入自己封装的axios请求实例
import request from '../tools/request'
export const addArticle = data => {
  return request({
    method: 'post',
    //url: '/my/addActicle',
    url: '/my/addActicle2',
    // url: '/my/addActicle3',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data
  })
}

vue代码:
[JavaScript] 纯文本查看 复制代码
<script>
import { addArticle } from '../../request/article'
export default {
  data() {
    return {
 
    }
  },
  methods: {
    async fileChange1() {
      //读取文件对象,并基于文件对象获取blob数据
      const files = this.$refs.file1.files
      const form = new FormData()
      for (const item of files) {
        form.append('cover_img', item)
      }
      form.append('test', 1)
      await addArticle(form)
    }
  }
}
</script>

浏览器查看自己的发送参数:
node+express+multer实现单个或多个图片文件,视频文件上传 - Margot_冰凌汇编

后端路由代码:
[JavaScript] 纯文本查看 复制代码
const multer = require('multer')
//创建multer的实例对象,通过dest属性指定文件的存放路径
const upload = multer({ dest: path.join(__dirname, '../uploads') })
//'cover_img'为前端存储文件的属性名,必须一致
router.post('/addActicle2', upload.array('cover_img', 3), addActicle2)

后端路由处理函数代码:
[JavaScript] 纯文本查看 复制代码
exports.addActicle2 = (req, res) => {
  // console.log('通过token解析出来的用户信息对象', req.user);
  console.log('通过multer解析表单的文本类型数据', req.body);
  let files = req.files
  console.log('通过multer解析表单的文件类型数据', files);
}

后端接收成功:
node+express+multer实现单个或多个图片文件,视频文件上传 - Margot_冰凌汇编

第二种方式
前端代码:

[JavaScript] 纯文本查看 复制代码
    <input type="file" ref="file1" @change="fileChange1" multiple />
    <input type="file" ref="file2" @change="fileChange2" multiple />
    <button @click="addArticle">上传</button>

自己封装的向后端发送请求的函数:
[JavaScript] 纯文本查看 复制代码
// 导入自己封装的axios请求实例
import request from '../tools/request'
export const addArticle = data => {
  return request({
    method: 'post',
    //url: '/my/addActicle',
    //url: '/my/addActicle2',
    url: '/my/addActicle3',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data
  })
}

vue代码:
[JavaScript] 纯文本查看 复制代码
<script>
import { addArticle } from '../../request/article'
export default {
  data() {
    return {
      form: new FormData()
    }
  },
  methods: {
    async fileChange1() {
      //读取文件对象,并基于文件对象获取blob数据
      const file = this.$refs.file1.files[0]
      this.form.append('cover_img', file)
      this.form.append('test', 1)
    },
    async fileChange2() {
      const file = this.$refs.file2.files[0]
      this.form.append('avatar', file)
    },
    async addArticle() {
      await addArticle(this.form)
    }
  }
}
</script>>

浏览器查看自己的发送参数:
node+express+multer实现单个或多个图片文件,视频文件上传 - Margot_冰凌汇编

后端路由代码:
[JavaScript] 纯文本查看 复制代码
const multer = require('multer')
//创建multer的实例对象,通过dest属性指定文件的存放路径
const upload = multer({ dest: path.join(__dirname, '../uploads') })
router.post('/addActicle3', upload.fields([{ name: 'cover_img', maxCount: 3 }, { name: 'avatar', maxCount: 2 }]), addActicle3)

后端路由处理函数代码:
[JavaScript] 纯文本查看 复制代码
exports.addActicle3 = (req, res) => {
  console.log('通过token解析出来的用户信息对象', req.user);
  console.log('通过multer解析表单的文本类型数据', req.body);
  let files = req.files
  console.log('通过multer解析表单的文件类型数据', files);
}

后端接收成功:
node+express+multer实现单个或多个图片文件,视频文件上传 - Margot_冰凌汇编
冰凌汇编免责声明
以上内容均来自网友转发或原创,如存在侵权请发送到站方邮件9003554@qq.com处理。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|站点统计|Archiver|小黑屋|RSS|冰凌汇编 ( 滇ICP备2022002049号 滇公网安备 53032102000029号)|网站地图

GMT+8, 2022-10-6 22:51 , Processed in 0.131965 second(s), 7 queries , Redis On.

冰凌汇编 - 建立于2021年12月20日

Powered by Discuz! © 2001-2022 Comsenz Inc.

快速回复 返回顶部 返回列表