axios前后端文件传输

2022-08-24 约 527 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=126498970

axios前后端文件传输

关键词由CSDN通过智能技术生成

此方法主要是使用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

目录

axios前后端文件传输

axios前后端文件传输