1. 前言

前两天，在公司做的需求当中，又出现了需要上传文件的场景，不过十年代码经验常年摸鱼的我，立马就给出了十分成熟的解决方案，使用axios+FormData,进行上传。

2. 简单介绍

2.1 axios

axios就不多说了，是XMLHttpRequest的一种封装，当然它也同时桥接了nodejs的http,这里就不展开了。详情参见axiso正统网站。

2.2 FormData

这是一个神秘的属性，其实主要是一般我们发送请求都是json或者get的params形式，所以这个不是很了解，但是实际上这个构造函数构造的是类似表单的key/value形式的对象，能够被XMLHttpRequest发送，所以当然它也能够存储Blob类型的对象。当我们发送数据的是Blob类型时，Content-Type会被设置成为multipart/form-data，然后进行自动进行处理，也就是通过这种方式实现文件上传。

3. 简单的实现上传

3.1 前端

这里简单的展示前端代码,具体可以参考 gitee.com/Agrement/te…:

<template>
  <input ref="inputRef" type="file">
  <button @click="upload">上传</button>
</template>

<script lang="ts">
import axios from 'axios'
import { defineComponent, ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  },
  setup(){
    const inputRef = ref<HTMLInputElement>();
    
    // funcs
    function upload(){
     const formdata = new FormData();
     const file =inputRef.value?.files?.item(0);
     formdata.append('file', file!);
     axios.post("https://localhost:44335/WeatherForecast",formdata,{headers:{
     }})
    }

    return {
      upload,
      inputRef
    }
  }
})
</script>

当我选择文件，单击上传后，就会发现文件自动被处理好发送了出去:

3.1 后端

这里我采用.net core,版本为5，用断点检查接收是否成功:

代码

   [HttpPost()]
    public string Post([FromForm] Microsoft.AspNetCore.Http.IFormFile file) {
        return '';
    }

debugger效果图

4. 总结

可以看到，通过axios+HTML5的FormData可以实现一个简单的上传，当然，上传不仅仅只有这些操作，在平常的业务中还有暂停，继续上传、显示上传进度等需求，感兴趣的小伙伴可以关注我的后续文章。 `