node使用formidable处理文件上传

一.npm install formidable

二.node路由处处理

router.post('/upload',function (req,res) {
    console.log("############# POST / UPLOAD   ##############")
    //fields  表示普通控件      files表示文件控件
    let form = new formidable.IncomingForm();
    form.keepExtensions = true;//显示后缀，不然文件没有后缀
    form.uploadDir = "./upload";
    form.parse(req, function(err, fields, files) {
        console.log(files);})
    res.send('成功');
})

二.前端部分html代码（负责发起文件传输请求，formdata格式）

<el-upload
                ref="upload"
                class="upload-demo"
                drag
                :action="imgpath"
                multiple
                style="margin: auto"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div
                  class="el-upload__tip"
                  slot="tip"
                  style="text-align: center"
                >
                  文件上传速度跟当前环境有关，请耐心等待
                  <el-row :gutter="20" style="margin-top: 10px">
                    <el-col :span="12">
                      <el-button
                        size="small"
                        @click="show = !show"
                        style="width: 100%"
                        >关闭
                      </el-button>
                    </el-col>
                    <el-col :span="12">
                      <el-button
                        size="small"
                        type="primary"
                        @click="importxlsx"
                        style="width: 100%"
                        >导入
                      </el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-upload>

三.前端js部分(basePath 是axios配置好了)

 imgpath: this.basePath + "/upload/upload",

四.检查文件上传是否成功

 可以看到上传的文件变成了一个随机命名的带扩展名的文件。(随机的原因是防止用户添加相同文件名的文件导致服务器识别有问题)

总结
formidable插件主要有两个重要功能：

1.  处理Node.js中的post请求(通常是表单请求时使用)
2.  进行文件或者图片的上传(在Node.js中用得非常多)