vue项目使用axios上传文件

最新推荐文章于 2025-05-27 20:42:38 发布

原创最新推荐文章于 2025-05-27 20:42:38 发布 · 942 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

30 篇文章

订阅专栏

vue

17 篇文章

订阅专栏

本文详细介绍了一种使用Axios进行文件上传的方法，通过封装axios并结合formData实现财务模块中的现金更新功能。文章展示了如何创建formData对象，添加文件，并设置正确的Content-Type头部信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios上传文件

axios 封装

按需求写相应的js

我这个是财务那块的，为了方便看，我把其他的函数删除了

/**
 * finance模块接口列表
 */

import axios from "./http"; // 导入http中创建的axios实例
import qs from "qs"; // 根据需求是否导入qs模块
import path from "../apiPath";
const finance = {
  cashUpdate(file, config) {
    return axios.post(path.cash_update, file, config);
  }
};
export default finance;

在需要的页面里使用

//
let formData = new FormData();
      let file = this.files[0];
      formData.append("file", file);
this.$api.finance
        .cashUpdate(formData, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          console.log(res);
        })
        .catch(() => {});