小工具      在线工具  汉语词典  css  js  c++  java

VUE+ElementUI+Axios文件上传陷阱及解决方案

Web前端,VUE,文件上传,Axios,Element 额外说明

收录于:38天前

最新的实战项目已经更新到GitHub了,大家点击直接看我的解决方案即可,对axios做了二次的深度封装,但使用起来不会有太大改变。

该解决方案太旧并且使用起来很麻烦。我不再推荐您阅读本教程。如果你真的需要的话我可以给你一个教程。

后端项目:SpringBoot

如果暂时找不到解决办法,就来试试我吧!如果您有好的解决方案,请给我您自己的解决方案。如果方便的话,分享一下。可以留言和私信给我哦!

让我告诉你一些需要注意的事情:

1.不要请求任何拦截,否则你会发现彩蛋,'Content-Type' = 'application/json'

2. '内容类型' = '多部分/表单数据'

3. 新的FormData()

4、打造纯净无污染的要求:

import axios from 'axios'
let formData = new FormData();
formData.append("files", file.raw);
formData.append("space", this.params.space);
axios.defaults.withCredentials = true;
axios.defaults.baseURL = "/api";
axios.defaults.timeout = 50000;
axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';

axios.post(this.$reqURI, formData).then((resp) => {
  console.log(resp)
  if (resp.data.status && resp.data.dataObj && resp.data.dataObj[0].success) {
    // 业务操作
  }
})
. . .

相关推荐

额外说明

rabbitmq学习(八)——路由路由模式

一、路由模型 之前博客说明了,采取FANOUT设置时,表示不处理路由键,只需要将队列绑定到交换机,发送消息到交换机就会被转发到该与交换机绑定的所有队列。所以需要设置路由键并能够按照路由键实现处理的话,就不能使用FANOUT类型。 1、消息生产者生产消息,

额外说明

thymeleaf 保留 2 位小数

使用thymeleaf保留2位小数的方法。 目录 (1)第1种写法(每隔3位有逗号) (2)第2种写法(每隔3位有逗号) (3)第3种写法(每隔3位没有逗号) (1)第1种写法(每隔3位有逗号) [[${ #numbers.formatDecimal(

额外说明

Android实战跑腿项目——登录注册

QQ 1274510382 Wechat JNZ_aming 商业联盟 QQ群538250800 技术搞事 QQ群599020441 解决方案 QQ群152889761 加入我们 QQ群649347320 共享学习 QQ群674240731 纪年科技am

额外说明

【PHP】走进 PHP 第二课 数据类型

【PHP】✔️走进 PHP✔️ 第二课 数据类型 概述 基础语法 echo 变量 数据类型 类型转换 概述 从今天开始, 小白我将带领大家一起来学习一下 PHP 的基础知识. 基础语法 PHP 脚本以<?php开始, 以?>结束: <?php # PHP

额外说明

现代数据环境下,如何做数据集成?这11个靠谱实践收藏了

目录 前言 一、11个最佳实践 1、尽量避免手工编码 2、由业务驱动并减少对 Schema 规范的依赖 3、设计批流一体的数据处理框架 4、在提取时清洗原始数据 5、尽量不要依赖文件传输 6、监控数据流中的一切 7、检查数据内容而不是只计算数量 8、通过

额外说明

【Java 基础篇】Java StringBuffer详解:更高效的字符串处理

在Java编程中,字符串是一个常见的数据类型,用于存储文本信息。然而,与字符串相关的操作可能会导致性能问题,因为字符串是不可变的,每次对字符串进行操作都会创建一个新的字符串对象。为了解决这个问题,Java提供了StringBuffer类,它允许我们有效地

额外说明

Vue3组件库

Vue组件库 Vite+Vue3+Typescript+TSX 1、项目搭建 1.1、创建项目(yarn) D:\WebstromProject>yarn create vite yarn create v1.22.19 [1/4] Resolving

额外说明

电脑系统提示缺少找不到dwmapi.dll文件如何解决?

其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或者损坏了,这时你只需下载这个dwmapi.dll文件进行安装(前提是找到适合的版本),当我

额外说明

Sublime Text 3 常用插件

第一步是安装 Package Control 快捷键【Ctrl+Shift+p】打开或点击【Package Control】 进入【包控制:安装包】 完成后,输入插件名称进行安装。请在左下角查看安装进度。 安装中 第二步、插件 1.中文本地化插件[Chi

额外说明

wordpress主题_选择完美的WordPress主题–您应该考虑的9件事

WordPress 主题 大多数初学者在为 WordPress 网站选择主题时都会感到不知所措。有数以千计的免费和付费选项。每个主题看起来都比另一个主题更好。如何为 WordPress 选择最佳主题?在本文中,我们将分享您应该考虑的 9 件事,以便您可以

ads via 小工具