Asp.net core 2.0 +SPA文件上传注意事项

2018-01-21 本文已影响245人 Angeladaddy

最近在做的一个工程，后端选用asp.net 2.0 core，前端用vue。选用core纯粹是好奇，想体验一下微软的新技术。还有就是实在不想写java...。技术组成如下：

后端：asp.net core 2.0 +JWT Auth + mongodb + RESTFul + swagger
前端：Vue + Vuetify
一开始一切都算顺利，可是到了文件上传环节，遇到了一点小挫折（掩面，其实是耽误了一天半时间），现在记录一下：

前端上传方式选择：
首先根据微软官网文档，asp.net core文件上传示例全部用的是表单+Razor的方式，后台用IFormFile接收。顺便吐槽一下，感觉微软总是慢半拍啊，整个core的介绍全都是MVC例子，没有RESTFul的，数据库全都是SQL。没有NoSQL。
SPA文件上传肯定不能用表单提交，那么可以选择的合理方式有：

axios
HTML5 原生XMLHttpRequest
jquery
各种封装好的第三方库（如vue-upload-componen)

以下对各种方式进行实验：

后端--------------------------

        [HttpPost("test")]
        public AppResponse UploadTest(IFormFile file)
        {
            if (file==null)
            {
                return responser.ReturnError(STATUS_CODE.BAD_REQUEST, "files is empty");
            }
            return responser.ReturnSuccess(extraInfo: file.FileName);
        }

关于文件上传，官方有一段文字解释如下：

If your controller is accepting uploaded files using IFormFile but you find that the value is always null, confirm that your HTML form is specifying an enctype value of multipart/form-data. If this attribute is not set on the <form> element, the file upload will not occur and any bound IFormFile arguments will be null.

意思就是说，上传文件的表单必须设置enctype=multipart/form-data，否则是取不到值的。

但如果是以非表单方式上传，前台应该怎么做？

前端-----------------------------

前台搭建以下简单页面：

<template>
<v-card>
<h1>UPLOAD</h1>
<v-divider></v-divider>
<input type="file" ref="f" />
<v-btn @click.native="uploadOnXMLHttpRequest">使用XMLHttpRequest上传</v-btn>
<v-btn @click.native="uploadOnAxios">使用axios上传</v-btn> 
</v-card>

</template>

首先说axios，经过实验，无法上传文件到.net core后台：

 uploadOnAxios() {
      const options = {
        url: this.url,
        method: 'post',
        data: {
          'file': this.$refs.f.files[0]
        },
     //   headers: { 'Content-Type': undefined }//无效
        //  headers: { 'Content-Type': 'multipart/form-data' }//无效
      }
      this.$http.request(options).then(res => {
        console.log(res)
      })
    },

上面注释掉的两个header，就是试图设置enctype，其实就是表单header里的content-type，经过测试，都没有效果，axios始终发送：application/json。后台因此拿不到值。

HTML5 原生XMLHttpRequest
首先是关于浏览器支持，这个要看工程，比如我这个工程，都用到vue和vuetify了，就不考虑兼容性了，放心大胆使用就行。

  uploadOnXMLHttpRequest() {
      const fileObj = this.$refs.f.files[0] // js 获取文件对象
      var url = this.url // 接收上传文件的后台地址
      var form = new FormData() // FormData 对象
      form.append('file', fileObj) // 文件对象

      const xhr = new XMLHttpRequest()  // XMLHttpRequest 对象
      xhr.open('post', url, true) // post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
     // xhr.setRequestHeader('Content-Type', undefined)
      xhr.onload = (evt) => {
        var data = JSON.parse(evt)
        if (data.status) {
          alert('上传成功！')
        } else {
          alert('上传失败！')
        }
      } // 请求完成
      xhr.onerror = (x) => {
        alert('failed:' + JSON.parse(x))
      } // 请求失败
      xhr.onprogress = (x) => {
        console.log(`uploading...${x}%`)
      } // 请求失败
      xhr.send(form) // 开始上传，发送form数据
    },

经测试，可以上传，注意xhr.setRequestHeader('Content-Type', undefined)被注释掉了，实际上这时XMLHttpRequest能自动设置content-type，这句加了反倒会报错。

jquery
我没有直接在vue项目中测试jquery，是在一个纯静态html中测试的,使用到了jQuery和query.form插件：

<!doctype html>

<head>
  <title>File Upload Progress Demo #2</title>
  <style>
    body {
      padding: 30px
    }

    form {
      display: block;
      margin: 20px auto;
      background: #eee;
      border-radius: 10px;
      padding: 15px
    }

    .progress {
      position: relative;
      width: 400px;
      border: 1px solid #ddd;
      padding: 1px;
      border-radius: 3px;
    }

    .bar {
      background-color: #B4F5B4;
      width: 0%;
      height: 20px;
      border-radius: 3px;
    }

    .percent {
      position: absolute;
      display: inline-block;
      top: 3px;
      left: 48%;
    }
  </style>
</head>

<body>
  <h1>File Upload Progress Demo #2</h1>
  <code>&lt;input type="file" name="myfile[]" multiple></code>
  <form action="http://localhost:5000/api/document/test" method="post" enctype="multipart/form-data">
    <input type="file" name="files" multiple>
    <br>
    <input type="submit" value="Upload File to Server">
  </form>

  <div class="progress">
    <div class="bar"></div>
    <div class="percent">0%</div>
  </div>

  <div id="status"></div>

  <script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery.form/3.36/jquery.form.min.js"></script>
  <script>
    (function () {

      var bar = $('.bar');
      var percent = $('.percent');
      var status = $('#status');

      $('form').ajaxForm({
        beforeSend: function () {
          status.empty();
          var percentVal = '0%';
          bar.width(percentVal)
          percent.html(percentVal);
        },
        uploadProgress: function (event, position, total, percentComplete) {
          var percentVal = percentComplete + '%';
          bar.width(percentVal)
          percent.html(percentVal);
          //console.log(percentVal, position, total);
        },
        success: function () {
          var percentVal = '100%';
          bar.width(percentVal)
          percent.html(percentVal);
        },
        complete: function (xhr) {
          status.html(xhr.responseText);
        }
      });

    })();
  </script>

结果：可以上传，这个应该没问题，因为本来就是一个表单上传啊~~，query.form的作用是使用了一个隐藏的iframe。上传后刷新的其实是这个iframe，所以用户感觉不到页面刷新。
虽然实现了，但个人并不喜欢这种hack的写法。jQuery应该退出历史舞台了。也算功成名就。还有，在vue中使用jQuery也不是很难，但总感觉不伦不类。

其他库：
这些库功能很多，但个人不建议使用，一来很多功能用不上，二来其底层实现不好控制

总结：

我最后选择了 HTML5 XMLHttpRequest 在asp.net core中上传文件，原生模块，灵活方便，随便就能写出一个个人定制的不错的上传组件。

补充

其实，把上传的文件和程序放在同一个服务器不是很好的做法，完全可以建一个资源服务器进行隔离，以下是用 express和multer建立的一个简单上传文件后台：

var express = require('express')
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

var app = express()

//allow custom header and CORS
app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

  if (req.method == 'OPTIONS') {
    res.send(200); //让options请求快速返回/
  }
  else {
    next();
  }
}); 

app.post('/profile', upload.single('file'), function (req, res, next) {
  const file = req.file
  const body = req.body
  res.send('ok,uploaded')
  next()
  // req.body will hold the text fields, if there were any
})

app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {
  // req.files is array of `photos` files
  // req.body will contain the text fields, if there were any
})

var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', cpUpload, function (req, res, next) {
  // req.files is an object (String -> Array) where fieldname is the key, and the value is array of files
  //
  // e.g.
  //  req.files['avatar'][0] -> File
  //  req.files['gallery'] -> Array
  //
  // req.body will contain the text fields, if there were any
})

var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;
  
    console.log('Example app listening at http://%s:%s', host, port);
  });

这样，上传文件到这个服务器后，拿到文件地址，再回来应用插入到数据库就行

当然，如果数据保密度不高，那用七牛是最简单的了

最近有个想法，出一个vue+core的工程管理系统（PMS）系列教程，各位喜欢就点个赞吧，我看着赞多了就开始写(^_)

Asp.net core 2.0 +SPA文件上传注意事项

后端--------------------------

意思就是说，上传文件的表单必须设置enctype=multipart/form-data，否则是取不到值的。

前端-----------------------------

总结：

补充

猜你喜欢

热点阅读