vue+element+node实现文件上传

前端：

VUE template部分：

    <el-form-item label="上传资料 *">
                        <el-upload :action="action" :http-request="modeUpload" class="avatar-uploader"
                            list-type="picture">
                            <el-button size="small" type="info">选择文件</el-button>
                        </el-upload>
      </el-form-item>


  <el-button type="primary" size="medium" @click='submit()'>点击上传</el-button>

VUE data 部分：

     data() {
            return {
                mode: {},
                file: ''
            };
        },

VUE methods部分:

//文件列表
            modeUpload: function (item) {
                this.mode = item.file
            },

            //提交所有表单数据到后台
            submit() {
                let fd = new FormData()//定义一个空的formData实例
                fd.append('templateFile', this.mode)
                fd.append('data', JSON.stringify(this.newBorrowForm))//如果有其他表单数据例如input可以追加到fd表单一并提交
                this.$axios.post('http://localhost:3000/formData', fd, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then((res) => {
                    
                })
            },

后端：

1.在config新建一个multerConfig.js用来处理前端传来的文件

const multer = require('multer')//需要npm下载multer模块

let storage = multer.diskStorage({
    //1.上传的文件放到哪里去
    destination(req, file, cb) {
        cb(null, './public/upload')
    },
    //2.重命名上传文件
    filename(req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname)
    }
})
const upload = multer({ storage })
module.exports = upload

路由层：

控制层：

module.exports = {
    //获取文件信息路径
    formData(req, res, next) {
        let imgUrl = '/upload/' + req.file.filename
        let formData = JSON.parse(req.body.data)
    }
},