关于文件上传

之前的文件上传，基本都是上传到阿里云，然后拿到具体的链接给到后台，但是最近，要求直接传文件给后台，实现数据的传输.
框架是vue+elementUI，使用的是el-upload组件进行上传

<el-upload
            drag
            v-model="fromData.file"
            class="upload-demo"
            action="#"
            accept=".xls,.xlsx,.csv"
            :auto-upload="false"
            :before-upload="onBeforeUpload"
            :on-change="handleChange">
            <i class="el-icon-upload2 upload-img-style"></i>
            <div class="el-upload__text dis-line">点击此处上传</div>
          </el-upload>

handleChange (file, fileList) {
      console.log(file, 11111)
      let reader = new FileReader()
      reader.readAsDataURL(file.raw)
      reader.onload = () => {
          this.fromData.file = reader.result
      }
      if (fileList.length > 1) {
        fileList.shift(0)
      }
    }

这个时候，上传文件，获取到的file内容如下截图展示

图1

这个时候感觉这样不能直接给后端，然后后端说用formdata格式上传，就把取得的file.row利用FileReader转换成类似图片的base64的字符串格式上传给后台，同时ajax数据请求也改成了对应的formdata的格式

let formData = new FormData()
      formData.append('feeCode', data.feeCode)
      formData.append('file', data.file)
      formData.append('ownRun', data.ownRun)
      data = formData

这个时候，后台依然提示传的格式不正确，然后进行了对比，发现唯一的区别就是上传的file的格式，不一样，如图所示，可见，上传的样式有问题，

图2

然后又看了一下，把获取到的file.row的值，不进行任何修改，File格式直接传送给后台

handleChange (file, fileList) {
      this.fromData.file = file.raw
      if (fileList.length > 1) {
        fileList.shift(0)
      }
    }

此时文件的格式如图

图3

此时，完成了文件的直传