express上传图片之——multer一

墨蓝 2021-11-23 04:52 398阅读 0赞

老步骤，安装、引用。

npm install multer

let multer = require("multer");
    
    let storage = multer.diskStorage({
    	destination: __dirname+'/../../uploads',//此处为上传的地址，可以是函数。
    	filename: function(req,file,cd){
    	 		cd(null , file.fieldname+ '-'+``Date.now()+'.jpg')
    		}//是自定义的文件名。
    		})
    let upload = multer({storage:storage}).single('file');//file为上传时的name值。
    router.post('/upload',upload,function(req,res,next){//此处是依托于express中间件router写的接口。
    
    })

在前端中的请求：用axios来写的。

<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
    
    
    
     update (e) {  // 上传照片
       var self = this
       let file = e.target.files[0]
       /* eslint-disable no-undef */
       let param = new FormData() // 创建form对象
       param.append('file', file, file.name) // 通过append向form对象添加数据
       param.append('chunk', '0') // 添加form表单中其他数据
       console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
       let config = {
        headers: {'Content-Type': 'multipart/form-data'}
       }
       // 添加请求头
      axios.post('/goods/uploads', param, config)
        .then(response => {
         if (response.data.code === 0) {
          self.ImgUrl = response.data.data
         }
         console.log(response.data)
        })
      }

详细教程传送门[multer的传送门][multer]

[multer]: https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

发表评论取消回复

表情：

评论列表（有 0 条评论，398人围观）

还没有评论，来说两句吧...

相关阅读

相关 multer图片上传

效果图![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215

电玩女神/ 2023年07月17日 12:45/ 0 赞/ 35 阅读

相关 @koa/multer文件上传

@koa/multer 该模块是[koa-multer的][koa-multer]一个分支，[koa-multer][]是koa社区中使用最广泛的multer中间件。由于缺乏

待我称王封你为后i/ 2023年07月07日 08:48/ 0 赞/ 50 阅读

相关 Express全系列教程之(十四)：通过multer实现文件上传

一、multer中间件再上传文件时，我们通常会使用到他。Multer用于处理multipart/form-data 类型的表单数据。首先我们先安装它： cnp

我会带着你远行/ 2023年01月07日 10:15/ 0 赞/ 413 阅读

相关 express+multer实现layedit富文本编辑器图片上传新增查看源码功能

express+multer实现layedit富文本编辑器图片上传 `新增layedit查看源码功能` 源码地址：https://gitee.com/yango52

浅浅的花香味﹌/ 2022年10月14日 00:47/ 0 赞/ 312 阅读

相关 Express实现图片上传

首先在node下面下载Express以及multer npm i expressnpm i multer复制代码然后写代码 const Express

ゝ一世哀愁。/ 2022年10月01日 09:48/ 0 赞/ 259 阅读

相关 nodejs上传文件--multer

上传单个文件的方法 1.在routes目录下添加upload.js文件（如果没有multer模块，则使用 npm install multer 来下载） upload.js

傷城~/ 2022年05月27日 12:25/ 0 赞/ 380 阅读

相关 Express文件上传中间件Multer

前言： Express默认并不处理HTTP请求体中的数据，对于普通请求体(JSON、二进制、字符串)数据，可以使用body-parser中间件。而文件上传(multipart

忘是亡心i/ 2022年05月03日 11:58/ 0 赞/ 1160 阅读

相关 nodejs-使用multer实现多张图片上传,express搭建脚手架

nodejs-使用multer实现多张图片上传,express搭建脚手架　　在工作中，我们经常会看到用户有多张图片上传，并且预览展示的需求.那么在具体实现中又该怎么做呢

痛定思痛。/ 2022年01月06日 10:15/ 0 赞/ 375 阅读

相关 express上传图片之——multer一

老步骤，安装、引用。 npm install multer let multer = require("multer"); let sto

墨蓝/ 2021年11月23日 04:52/ 0 赞/ 399 阅读

相关 vue中通过multer上传图片到express服务器、单个文件下载、批量文件下载

首先在express中安装multer cnpm i -S multer express项目结构 ![20200905115404356.png][] u

男娘i/ 2021年07月25日 15:46/ 0 赞/ 1076 阅读