iview上传多文件

iView自带的文件上传功能为Upload组件，基本用法参考文档upload

文档中的示例都是选择文件后，直接上传至action对应的后台接口。但在很多情况下，需要在选择一个或多个文件后，单击其他按钮进行上传，示例代码如下。
其中，:before-upload对应的方法需要设置为return false,阻止iview的默认上传。
通过upload按钮对应的方法开始文件上传。在多文件环境下，每次只能上传一文件，后台的upload()方法会被调用若干次。

<!-- html -->
<Upload
   ref="upload"
   multiple
   action="/upload"
   :before-upload="checkFiles"
  :on-success="handleSuccess"
  :on-error="handleError"
  :headers="headers"
>
       <Button icon="ios-cloud-upload-outline">Choose files</Button>
</Upload>
<Button @click="submitFiles">Upload</Button>

// js
submitFiles () {
  for (let i = 0; i < this.uploadFile.length; i++) {
    let item = this.uploadFile[i]
    // 此处可以设置headers
    this.$refs.upload.post(item);
}
// 处理正确提交的返回值
handleSuccess (res) {
    console.log('res: ', res)
    console.log('success!')
},
handleError (res) {
    console.log('upload error!')
    console.log('upload error: ', res)
},

如果不使用iview自带的上传功能，可选择使用axios上传文件。但需要注意，如果使用封装好的axios请求，可能会引发一些问题。

由于axios接口通常请求的都是json数据，封装后的axios请求可能会默认设置Content-Type为application/json，而文件上传需要的Content-Type为multipart/form-data.

在new FormData()后，如果需要查看其值，需要使用formData.get(key)打印其内容，直接console.log(formData)是无内容的。

// js
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
export default {
  upload () {
     var formData = new FormData();
      //重点在这里 如果使用 var data = {}; data.inputfile=... 这样的方式不能正常上传
      formData.append('inputFile', this.uploadFile[0])
      console.log('form: ', formData.get('inputFile'))
      let headers = {headers: {'Content-Type': 'multipart/form-data;charset=UTF-8'}}
      Vue.axios.post('/upload', formData, headers).then(function(data){
          console.log(data);
      },function(err){
          console.log(err);
      })  
  }
}