如何将使用输入type =“ file”上传的数据转换为Blob格式?

时间:2020-06-23 13:03:01

标签: javascript file vue.js blob

我有一个页面将文件上传到服务器。当前我将文件附加到FormData对象并直接在axios帖子中发送此FormData对象(fd)。由于我将此数据存储在数据库中,因此在通过axios.post发送文件之前,了解如何将该文件转换为blob数据。

FileUpload.vue


<template>
<div class="file">
<input type="file"  @change="onFileChanged">  
</div>
</template>
<script>
export default {
  name: 'FileUpload',
  data () {
    return {
      selectedFile : null
    }
  },
  methods: {
      onFileChanged (event) {        
          this.selectedFile = event.target.files[0];
          this.$store.dispatch('uploadFile', this.selectedFile); // calls the uploadFile() function
        }

}
}
</script>

我的uploadFile()函数

async function uploadFile(path, data) {
  try {
    var fd = new FormData()
    fd.append('file', data)
    let response = await axios.post(props.base_url + path, fd, { headers: { 'Content-Type': 'multipart/form-data' } })
    if (response.status == 200) {
      console.log('you have a response')
      console.log(response.status)
    }
    return response.data
  } catch (err) {
    console.error(err)
  }
}

因此,在传递给axios发布请求之前,如何将通过输入type =“ file”上传的文件转换为blob数据。请以我的代码为例。

0 个答案:

没有答案