element向exp_res上传文件失败，一直返回404

Question

请问应该怎么处理

<el-upload class="upload-demo" :data="uploadData" action="http://144.123.17.30:26666/images/upload"
            :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
            :on-exceed="handleExceed" :file-list="fileList" :on-success="getAvatarSuccess" :headers="SetHeaders">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">最多只能上传3个文件</div>
        </el-upload>

 return {
                fileList: [],
                avatar: '', 
                uploadData: {
                    name: this.$store.state.username
                },
                SetHeaders: {
                    'Content-Type': 'nultipart/form-data;'
                },

            }

后端app.js

var createError = require('http-errors');
var exp ress = require('exp ress');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = exp ress();
var formidable = require('formidable')

app.use(logger('dev'));
app.use(exp ress.json());
app.use(exp ress.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(exp ress.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "X-Requested-With")
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS")
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8")
    next()
})
app.post('/upload', (req, res, next) => {
	console.log('11111111111111111')
  let form = new formidable.IncomingForm()
  form.encoding = 'utf-8' // 编码
  form.keepExtensions = true // 保留扩展名
  form.uploadDir = path.join(__dirname, '../public/images/') //文件存储路径 最后要注意加 '/' 否则会被存在public下
  form.parse(req, (err, fileds ,files) => { // 解析 formData 数据
    if(err) return next(err) 
    let username = fileds.name //用户名 用于修改用户头像路径
	let oldPath = files.file.path //获取文件路径 ~/public/images/<随机生成的文件名>.<扩展名>
	let imgname = files.file.name //前台上传时的文件名 也就是文件原本的名字
	let userImgname = imgname.replace(/[^.]+/, username) //把扩展名前的文件名给替换掉
	//我这里为了方便存储 统一将文件名改为 <用户名>.jpg
    let newPath = path.join(path.dirname(oldPath), userImgname) 
    fs.rename(oldPath, newPath, (err) => {
      if(err) return next(err)
      Model.User.updateOne({ name: username },  //更新用户的avatar属性
        { avatar: userImgname }, err => {
      	  if(err) return next(err)
          res.json({ avatar: userImgname })              		
      	})
      })
  })
})

// catch 404 and forward to error handler
app.use(function(req, res, next) {
	//console.log(req)
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

module.exports = app;

Answer 1

大哥结帖给分