Question

当我想上传图像并使用FormData发送其他数据时。 Axios似乎将图像序列化。因此，当我使用Axios上传图像时，图像作为字符串在身体的有效负载内。因此，我无法在服务器端使用Multer从请求中检索上传的图像。

这是我的Vue代码：

＆＃13;

export default () {
  name: 'app',
  data () {
    image: ''
  },
  methods: {
      onFileChange (e) {
      var files = e.target.files || e.dataTransfer.files
      if (!files.length) {
        return
      }
      // console.log(files[0])
      // var x = files[0]
      return this.createImage(files[0])
      // return new Buffer(x)
    },
    createImage (file) {
      // var image = new Image()
      var reader = new FileReader()
      var vm = this

      reader.onload = (e) => {
        // vm.image = e.target.result
        vm.image = file.toString('base64')
        console.log(vm.image)
      }
      reader.readAsDataURL(file)
    },
    submitStaff () {
      const formData = new FormData()
      formData.append('file', this.image)
      formData.append('name', this.data.name)
      formData.append('username', this.data.username)
      formData.append('password', this.data.password)

      axios.post('api/myApiUrl', formData)
        .then(function (response) {
          console.log(response)
        })
        .catch(function (error) {
          console.log(error)
        })    
  }
}

＆＃13;

<input type="file" @change="onFileChange">

＆＃13;

请求有效负载（Vue出错）

请求有效负载（邮递员成功）

我该如何解决这个问题？谢谢！

Answer 1

我遇到了与之相关的问题，在我的情况下，我将Content-Type设置为我所有请求的默认配置，执行此操作：

axios.defaults.headers.common['Content-Type'] = 'application/json [or something]';

而且，我记得，我的部分解决方案是删除此配置以使上传工作。我刚从代码中删除了这一行，所有请求都运行良好。一旦我删除它，我就会发现我的标头请求已更改为此（请参阅附图并注意Content-Type条目）：

您应该警惕的另一件事是<input type="file" name="file">的字段名称。我有一个java后端，期望一个名为＆＃34; file＆＃34;的参数，因此，在我的情况下，我的输入文件HAS被设置为＆＃34; file＆＃34;在我的HTML和我的服务器端，像这样：

    public ResponseEntity<Show> create(
        @RequestParam("file") MultipartFile file, 
        RedirectAttributes redirectAttributes) { ... }

观察条目@RequestParam("file") ...

在HTML文件中：

    <form enctype="multipart/form-data" novalidate v-if="isInitial || isSaving">
    <div class="well">
        <div class="form-group">
            <label>* Selecione o arquivo excel. O sistema fará o upload automaticamente!</label>
            <div class="dropbox">
              <input type="file" single name="file" :disabled="isSaving" @change="filesChange($event.target.name, $event.target.files); fileCount = $event.target.files.length"
                accept="application/vnd.ms-excel" class="input-file">
                <p v-if="isInitial">
                  Solte o arquivo excel aqui<br> ou clique para buscar.
                </p>
                <p v-if="isSaving">
                  Carregando arquivo...
                </p>
            </div>
        </div>
    </div>
</form>

您还可以查看本教程，我的帮助：https://scotch.io/tutorials/how-to-handle-file-uploads-in-vue-2

我希望它可以帮到你！

Axios for Vue没有将图像上传到服务器

1 个答案: