用nodeExpress做后台的Vue模块化开发中elementUI图片上传的问题

最近在Vue模块化开发中用到了elementUI中图片上传的功能，可是把我折腾的够呛，花了两天时间各种查API请教大佬最后解决了问题，希望我的问题可以在某个时候帮助各位。最后多嘴一句 elementUI的API该更新了！

element官网：http://element-cn.eleme.io/#/zh-CN

首先我前台上传的代码是这样的：

<el-upload
              class="upload-demo"
              id="lk-upload"
              action="http://localhost:8888/upload"
              :on-preview="handlePreview"
              :beforeUpload="beforeAvatarUpload"
              :on-progress="onProgress"
              :on-success="onSuccess1"
              :file-list="fileList2"
              :limit="1"
              :on-exceed="aaa"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10M</div>
            </el-upload>

重点是action，它是上传的目标地址，必选参数，类型string。这是重点，这里配置的是我后台的端口和接口信息（前后台的端口是不一样的，所以后台需要配置跨域）。Vue部分就只有这些了。下面是后台部分。

这里给个链接，这位大佬配置的跨域很棒，参考一下就ok：https://www.cnblogs.com/xuange306/p/6185453.html

其次需要一个npm一个文件上传的模块：

npm i multer -D

然后在项目里建一个utils文件夹，在里面建一个multer.js文件，这个是用来解析前台图片，然后保存：

var multer = require('multer');

var storage = multer.diskStorage({
  destination: function (req, file, cb) { //指定硬盘的路径，文件保存的地方
    cb(null, './public/upload')
  },
  filename: function (req, file, cb) {//指定文件名和拓展名
    //originalname 文件名
    var arr = file.originalname.split('.');
    // cb(null, arr[0] + '.' + arr[1]);
    cb(null, arr[0] + '-' + Date.now() + '.' + arr[1]);
  }
});

var upload = multer({storage: storage});

module.exports = upload;

然后在app.js导入这个模块：

var multer=require('./utils/multer.js');

然后app.js配置接口，用multer处理前台的请求：

app.post('/upload',multer.array('file',5),function (req,res) {
  console.log('成功');
  res.send({error:0,res:req.files});
});

重点到了！我一直是卡在这一步。问题就在multer.array(‘前台发过来的名称’，最大处理个数)。这个名称我一般用的是files，因为一般都是多个上传，但是！element用的是file。API没有说明，我也一直错误的理解，目前为止我还不确定是否还有别的名称。然而我在console.log(req.file)的时候，控制台说没有file这个东西？这个时候又变成了files。天，你在玩什么？能给个明确的文档嘛。

扫描二维码关注公众号，回复： 4835704 查看本文章

对。其实很简单的嘛，你给个文档啊。各位有不明白的地方可以给我留言。

用nodeExpress做后台的Vue模块化开发中elementUI图片上传的问题

猜你喜欢