上传文件是每个前端开发者都会遇到的问题,在之前实习期做了一个上传文件的功能,当时没有彻底搞明白问题所在,现在重新复盘下。

1.使用formData来上传文件,没有使用axios上传文件,之前在学校有做过。生成一个formData对象

let formData = new FormData()
formData.append('xxx', 'yyyyy')

通过dom操作获得input中file[0],然后append给formData对象,网上有详细的api

2.在使用axios之后发先我之前用的方法后台接受不到文件,问题是content-type是application/json,上传文件的时候使用的content-type应该是multipart/form-data才对。看了网上的一些理解,好像是说这个conten-type会在我们上传文件的时候自动变为multipart/form-data,但是为什么我的是json呢。问题的关键在axios身上

axios.interceptors.request.use(
request => {
store.dispatch('httpStatus', { status: '', statusMsg: '' })
return request
},
error => {
return Promise.reject(error)
}
)

axios对我们的request做了一个拦截然后重新返回,这个时候我们的formData会被变为一个Object,浏览器给出的是application/json,所以我们的操作失败了

3.如何解决这个问题呢?

  3.1我们在我们的action.js中修改axios的配置

let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}

结果当然还是不行,怎么会这么容易就让我搞定呢!!!,后台报错 ---no multipart boundary was found,就是一个二级制的分隔符不见了,我们可以手动添加一个

let config = {
headers: {
'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
}
}

可以了,但是我还是觉得不是很好,应该我们改动了headers里的东西,于是乎又看了我导师和网上的方法,一起贴出来。

  3.2 创建新的axios实例,挂在在vue原型上

  具体参考这篇文章https://www.jianshu.com/p/1405f389fb1d

  3.3 我导师给的方案,在action.js,axios的第三个参数config,加入一个transformRequest

let config = {
headers: {
'Content-Type': 'multipart/form-data'
},
transformRequest: [function (data) {
return data
}]
}

关于这个方法我查了以下api,他是说 transformRequest 允许在向服务器发送前,修改请求数据,这个回调中可以对data进行修改,这样设置 config之后,问题就解决了

关于vue+axios上传文件的踩坑分析的更多相关文章

  1. vue+axios上传文件

    单独上传文件: <input class="file" name="file" type="file" accept="im ...

  2. vue axios上传文件实例

    <head> <title></title> <meta charset="UTF-8"> <meta name=" ...

  3. vue项目上传文件以及进度条

    最近做项目的时候,需要上传自定义镜像.并且附带进度条,上网查询一下资料,经过一番折磨,也总算做出来了,把自己写项目的内容给大家分享一下. 先直接贴代码吧 1.首先声明一个formData对象. 2.把 ...

  4. 使用PUT方法上传文件无法工作原因分析

    现象 在Spring Framework中,使用HTTP的PUT方法上传文件时,在服务器端发现Multipart参数为空. 原因 Spring中的StandardServletMultipartRes ...

  5. 微信小程序上传文件遇到的坑

    在开发小程序时,使用的花生壳做的内网映射,域名使用花生壳卖的https域名 在做小程序文件上传时,调用接口,老是报错. Caused by: org.apache.commons.fileupload ...

  6. qq上传文件进行测试要点分析

    功能 QQ 兼容性 1.Win系统/Mac系统  Android/IOS 品牌 传 1.上传方式:直接拖拽,按回车键上传 2.多个文件同时上传给一人/多人(考虑稳定性,是否存在内存泄露) 3.不是好友 ...

  7. 使用axios上传文件到阿里云对象文件存储服务器oss

    背景 OSS可用于图片.音视频.日志等海量文件的存储.各种终端设备.Web网站程序.移动应用可以直接向OSS写入或读取数据.OSS支持流式写入和文件写入两种方式.使用阿里云oss做文件存储的时候,不可 ...

  8. 5.Vue临时上传文件夹

    1.在项目目录中,通过npm install multiparty进行安装必要组件npm install multiparty --save-dev 2.app.js中添加app.use(bodyPa ...

  9. Vue.js 上传文件(后台使用.net)

    页面部分 <div id="app"> <form id="myform"> <input type="file&quo ...

随机推荐

  1. 自定义Yaml解析器替换Properties文件

    自定义Yaml解析器替换Properties文件 项目结构 案例代码 配置类SpringConfiguration @Configuration @Import(JdbcCofnig.class) @ ...

  2. Java8实战及自己的总结

    java8 介绍 java8是2014年3月份,由Oracle发布的一个版本,又称之为jdk1.8,是现再我们在学习和工作中用的最多的一个版本.   在jdk1.8中,java8以添加非常多的新特性, ...

  3. 我的第一个netcore2.2 api项目搭建(三)

    上一章快速添加了swagger文档管理功能,我的第一个netcore2.2 api项目搭建(二) 这一章实现目标三:api添加身份验证功能 在实现该目标之前,先得理解netcore运行机制. 这是微软 ...

  4. 6.Javascript如何处理循环的异步操作

    前沿:参考ES6语法的async/await的处理机制 先上一段代码 function getMoney(){ var money=[100,200,300] for( let i=0; i<m ...

  5. vue脚手架创建项目及常用配置

    首先安装配置这两篇挺好的 https://www.cnblogs.com/lgx5/p/10732016.html https://blog.csdn.net/qiang510939237/artic ...

  6. 学习笔记之正则表达式 (Regular Expressions)

    正则表达式_百度百科 http://baike.baidu.com/link?url=ybgDrN2WQQKN64_gu-diCqdeDqL8LQ-jiQ-ftzzPaNUa9CmgBRDNnyx50 ...

  7. ssh工具推荐

    FinalShell 看图就知道功能多强大了, 官网地址 http://www.hostbuf.com

  8. Object中defineProperty数据描述

    Object.defineProperty是对对象中的属性进行数据描述的 使用语法: Object.defineProperty(obj,prop,descriptor) 使用示例: var data ...

  9. Java 数组(三)二维数组

    如果一维数组的各个元素仍然是一个数组,那么它就是一个二维数组.二维数组常用于表示表,表中的信息以行和列的形式组织,第一个下标代表元素所在的行,第二个下标代表所在的列. 一.二维数组的创建 1.先声明, ...

  10. RabbitMQ启动出现的问题与解决办法

    问题1 使用命令启动 service rabbitmq-server start 报错如下: Starting rabbitmq-server (via systemctl): Job for rab ...