Axios的form表单提交

注意：form表单的请求头有两种：application/x-www-form-urlencoded 和 multipart/form-data

如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。

// 文件上传
      upLoads(e){
        if((e.target.files[0].size/1024).toFixed(0) > 10240){
          VUE.$message.error('导入文件不能超过10M')
          return
        }

        let name = e.target.files[0].name
        let token = JSON.parse(localStorage.shop).token

        if(name.indexOf(".csv")!= -1 || name.indexOf(".xls")!= -1 || name.indexOf(".xlsx")!= -1){
          let fromData = new FormData()
          fromData.append('token', token)
          fromData.append('file', e.target.files[0])
          let config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
          // form表单提交
          // file：导入的文件，限制大小2M
          Axios.post('/shop/qiguan/import_user/import', fromData, config).then( res => {
            let data = res.data
            if(data.code == 0){
              if(data.data.error == 0){
                // 导入成功
                this.errorShow = false
              }else {
                // 导入失败，模板件内容有误
                this.errorShow = true
                this.errorList = data.data.errors
              }
            }else {
              VUE.$message.error(res.msg || '导入失败')
            }
          }).catch( res => {
            VUE.$message.error(res.msg || '导入失败')
          })
        }else {
          VUE.$message.error('只支持CSV、XLS、XLSX格式的文件')
        }
      },