axios前后端文件传输

• 此方法主要是使用FormData数据进行文件的上传；FormData是XMLHttpRequest Level2提供的一个接口对象，提供了一种表单数据的键值对的构造方法，经过它的数据处理可以使用XMLHttpRequest.send( )方法送出；如果送出时的编码类型被设为"multipart/form-data"，会使用和表达一样的格式；
• 使用FormData实例的append()方法或set()方法设置数据，其中append与set区别在于，一个是不会覆盖原值，只添加新值。一个是会覆盖原值
• 使用input设置type=filte来接受上传的文件，通过upload事件的file对象获取上传的文件对象

<template>
    <input type="file" id="input" multiple @change="upload" />
</template>

<script>
import axios from "axios";
export default {
  setup() {
    function upload(file) {
      for (var file of file.target.files) {
        console.log(file);
        const formData = new FormData();
        const flie = file;
        formData.append(file, flie);
        axios
          .post("url", formData, {
            "Content-type": "multipart/form-data",
          })
          .then(
            (res) => {
              console.log("okkkk", res);
              // 上传成功后的处理
            },
            (err) => {
              console.log("nonono", err);
              // 出现错误时的处理
            }
      )}
    }
    return {
      upload,
    };
  },
};
</script>

原博是使用的vue2，这里改成了3的写法
原文链接：https://blog.csdn.net/weixin_39876270/article/details/108130885