Axios 通过 FormData 上传文件

point_zg

已于 2024-07-23 16:16:57 修改

阅读量446

点赞数 5

文章标签：前端

于 2024-07-23 16:15:54 首次发布

本文链接：https://blog.csdn.net/csdnzhaoxiaosheng/article/details/140637766

版权

1.FormData介绍

FormData 是一个用于在客户端创建表单数据的接口。可以通过 JavaScript 中的

new FormData() 构造函数创建。FormData 可以将表单字段的键值对以键值对的方式添加，

同时也支持添加文件。

2.FormData 的主要优点:

可以异步上传文件
可以上传二进制文件
提交表单时自动处理表单数据编码
可以上传文件流(Blob 对象和 File 对象)

3.FormData 对象上传文件

3.1第一种：直接在 FormData 中添加文件

将文件对象作为 value，添加到 FormData 中，axios 会自动对文件进行编码。

const formData = new FormData();

formData.append('file', fileInput.files[0]); // fileInput 为 <input type="file" />

axios.post('/upload', formData)

3.2第二种：设置 request header 的 Content-Type

const formData = new FormData();

formData.append('file', fileInput.files[0]);

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})

调用样例：

function uploadFile() {
  const fileInput = document.querySelector('#fileInput');
  const file = fileInput.files[0];

  // 使用FormData对象上传文件
  const formData = new FormData();
  formData.append('file', file);

  axios.post('http://localhost:8089/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(response => {
    console.log('上传成功', response.data);
  }).catch(error => {
    console.error('上传失败', error);
  });
}

4.选择文件案例

html：

<!DOCTYPE html>
<html>
<head>
  <title>文件上传Demo</title>
</head>
<body>
  <input type="file" id="fileInput">
  <button onclick="uploadFile()">上传文件</button>

  <script src="axios.min.js"></script>
  <script src="main.js"></script>
</body>
</html>

JavaScript：

function uploadFile() {
  const fileInput = document.querySelector('#fileInput');
  const file = fileInput.files[0];

  // 使用FormData对象上传文件
  const formData = new FormData();
  formData.append('file', file);

  axios.post('http://localhost:8089/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(response => {
    console.log('上传成功', response.data);
  }).catch(error => {
    console.error('上传失败', error);
  });
}

5.图片base64转file上传案例

let imgBase64 = "data:image/jpeg;base64,/9j/......"
const formData = new FormData();
formData.append('file', base64ToFile(imgBase64,"pointFile.jpg"));
pointUpLoadFile(formData)

function base64ToFile(base64Data, filename) {
  const parts = base64Data.split(';base64,');
  const contentType = parts[0].split(':')[1];
  const raw = window.atob(parts[1]);
  const rawLength = raw.length;
  const uInt8Array = new Uint8Array(rawLength);
  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  const blob = new Blob([uInt8Array], {type: contentType});
  const file = new File([blob], filename, {type: contentType});
  return file;
}

function pointUpLoadFile(formData){
  axios.post('http://localhost:8089/upload',formData,{
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(response=>{
          console.log('上传成功', response.data);
        }).catch(error=>{
          console.error('上传失败', error);
        })
}