Axios 中的文件上传 File对象的方法

  1. 使用 FormData 对象
    FormData是一个用于创建表单数据的 API,可用于发送包含文件和其他表单数据的multipart/form-data请求。这是处理文件上传的常用方法。通过FormData对象,可以将文件数据添加到表单中,然后使用 Axios 的post或put方法发送请求
javascript 复制代码
在.env.development 文件中配置地址 
# 只在开发模式中被载入
VITE_PORT = 8001

# 网站根目录
VITE_PUBLIC_PATH = /

# 是否开启mock
VITE_USE_MOCK = false

# 网站前缀
VITE_BASE_URL = /

# 是否删除console
VITE_DROP_CONSOLE = false

# 跨域代理,可以配置多个,请注意不要换行
#VITE_PROXY = [["/appApi","http://localhost:8001"],["/upload","http://localhost:8001/upload"]]
#VITE_PROXY=[["/api","https://naive-ui-admin"]]

# API 接口地址
VITE_GLOB_API_URL = http://247.94.82.23:8091

# 图片上传地址
VITE_GLOB_UPLOAD_URL = http://247.94.82.23:8091/file/upload/

# 图片前缀地址
VITE_GLOB_IMG_URL=

# 接口前缀
VITE_GLOB_API_URL_PREFIX = /

//在接口导出文件中写接口
  const filePath = import.meta.env.VITE_GLOB_API_URL;

  export function uploadfile(file) { //上传附件
    console.log(file);
    console.log(filePath+'/upload/file');
  
    const formData = new FormData();
    formData.append('file', file);

    return new Promise(function(resolve) {// 执行器函数  同步回调
   
    axios.post(filePath+'/upload/file', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }  
    }).then(response => {
      console.log('上传成功', response.data);
     
      resolve(response.data)
    }).catch(error => {
      console.error('上传失败', error);
     
      resolve(error)
    });
  })
  }
  //在调用的地方写调用的函数
  import * as jk  from '@/api/appw';
const afterRead = async (file) => {
      // 此时可以自行将文件上传至服务器
      //file文件里边的数据如上图所示
      console.log(file);
      let dat =  jk.uploadfile(file.file);
      console.log(dat);

 }
//

// 
const axios = require('axios');
const fileInput = document.querySelector('#fileInput');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log('上传成功', response.data);
}).catch(error => {
  console.error('上传失败', error);
});
相关推荐
猿榜37 分钟前
魔改编译-永久解决selenium痕迹(二)
javascript·python
阿幸软件杂货间41 分钟前
阿幸课堂随机点名
android·开发语言·javascript
threelab1 小时前
three案例 Three.js波纹效果演示
开发语言·javascript·ecmascript
1undefined21 小时前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
用户7579419949702 小时前
基于JavaScript的简易Git
javascript
gzzeason2 小时前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕7782 小时前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽2 小时前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
自由逐风2 小时前
JS 处理长整型数字的坑:从雪花 ID 精度丢失说起
javascript
爱学习的茄子2 小时前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试