express上传图片之——multer一

墨蓝 2021-11-23 04:52 293阅读 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