工作中一直都是调用后端给好的图片上传接口，对于文件上传这块并没有去细究，所以这次项目中遇到这个问题，被折磨了好久，最后终于实现了，在过程中发现网上很少有express+vue+vant环境的图片上传教程案例等，虽然说这种功能的实现在不同环境下大同小异，但是为了让一些跟我一样的小白少走弯路，在这里总结下研究结果。

一、express后端

1.upload.js

/**upload.js**/
const multer = require('multer')
const mkdirp = require('mkdirp')
const path= require('path');
const upload = () => {
    const storage = multer.diskStorage({
        destination: async (req, file, callback) => { // 指定上传后保存到哪一个文件夹中
            await mkdirp(`./public/loading`)  // 创建目录,也可以手动创建
            callback(null, `public/loading`) 
        filename: (req, file, callback) => { // 给保存的文件命名，需要返回全称，包括后缀
            var path = require('path');
            let extname = path.extname(file.originalname); // 获取后缀名
            let fileName = path.parse(file.originalname).name // 获取上传的文件名
            callback(null, `${fileName}-${Date.now()}${extname}`)//加上时间，防止文件重名
    return multer({ storage })
module.exports = {
    upload
 upload.js主要存放对multer的配置，可以直接复制引入自己的express项目，以下为multer的官方文档。
 
multer/README-zh-cn.md at master · expressjs/multer · GitHubhttps://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md
 
DiskStorage中的两个配置destination和filename，
 
destination用于确定上传的文件应该存储在哪个文件夹中；
 
filename用于确定文件夹中的文件名；
 
2.接口代码，我是写在users.js路由下面
 
const express = require('express');
const router = express.Router();
const tools = require('../upload');//引入upload库
router.post('/upload',tools.upload().single('pic'),(req,res)=>{//single为multer对象的一个api
  res.send({  // 给前端返回的数据
      file: req.file,
      path:`http://localhost:3000/loading/${req.file.filename}`//返回url地址
  console.log("req",req.file);
主要是调用single方法，然后path返回一个图片的url，这个需要设置一下静态文件地址，我给设置成了根目录下的public文件夹。
 
app.use(express.static(path.join(__dirname, 'public'))); //指定静态资源文件
二、前端代码
 
<van-uploader
      v-model="fileList"
      multiple
      :after-read="afterRead"
      result-type="file"
  methods: {
    afterRead(file) {
      console.log(file.file);
      this.uploadImg(file.file);
    uploadImg(file) {
      let formData = new FormData();
      //此处文件名必须为 pic ，因为后台设置仅接口此文件名
      formData.append("pic", file);
      this.$axios({
        method: "post",
        url: "http://localhost:3000/users/upload", 
        data: formData,
      .then(function (res) {
        console.log(res);
      .catch(function (err) {});
这里注意一点，post传参中的pic字段，需要对应后端single()的参数，不能随便传。
 
在给后端传参数的时候我一直觉得很疑惑，不知道到底传什么，在参考一些代码后我发现传的是afterRead(file)的file参数：
 
       打印出来发现就是一些描述字段，于是就是详细查了一下这个对象，发现他是FIle对象，参考资料如下
 
(35条消息) Html5——File、FileReader、Blob、Fromdata对象_Chosen Wu的博客-CSDN博客_file撖寡情
 
                                    手把手教你开发带预览的 Vue 图片上传组件，即图片上传管理后台。只要你跟本教程一步一步走，最终能很好的理解整个前后端传图的工程逻辑。前端我们使用 Vue + Axios + Multipart 来搭建前端上传图片应用，后端我们使用 Node.js + Express + Multer 来搭建后端上传图片的后端处理。
https://liubing.me/vue-tinymce-5.html#%E6%8F%92%E4%BB%B6%E5%AE%89%E8%A3%85
https://blog.csdn.net/Smoisy/article/details/81268772
https://cloud.tencent.com/developer/ar...
                                    Vue + express + multer实现注册上传图片前端部分界面显示图片部分的代码Vue html部分代码Vue js部分代码后台部分multer的安装安装`npm install multer -save`使用
项目使用elementUI框架，重点实现图片上传
图片部分的代码
Vue html部分代码
<template>
    <div class="container">
        <div class="form-container
创建一个文件夹font-server，执行以下初始化命令
npm init -y
npm install expres body-parser //安装express和body-parser
npm install multer --save //Multer 是一个node.js中间件，主要用于上传文件。
在font-server目录下新建文件app.js，新建文件夹upload、api。在api文件夹下新建文件upLoadImg.j
// 自定义上传目录 文件名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './public/uploads') 
                                    Vant Uploader 文件上传Vant Uploader 文件上传组建主要实现手机端上传文件功能。引入importVuefrom'vue';import{Uploader}from'vant';Vue.use(Uploader);基础用法文件上传完毕后会触发after-read回调函数，获取到对应的file对象exportdefault{methods:{afterRe...
        &lt;form name="fileinfo" id="myForm"&gt;
            &lt;input type="text" name="title" v-model="formData.title"&