首先在项目里用了拦截器的,由于拦截器会将传递的参数转成对象,所以你i提交的时候会发现multipart/form-data或转变成application/json

其次关于input的文件上传是需要一个非常纯净的axios的,于是我就在main.js里重新挂载了一个axios

//main.js
//自定义
var instance = axios.create({
baseURL:'',
timeout:5000,
headers:{"Content-Type":"multipart/form-data"}
}); Vue.prototype.axios = axios;
Vue.prototype.instance=instance;

在组件中上传代码

var img_file = this.$refs.inputs;
var formData = new FormData(img_file);
var fileObj = img_file.files[0];
console.log(formData)
formData.append("dsc","dsc");
formData.append("file",fileObj);
console.log(fileObj)
this.instance.post(url,formData).then((res)=>{
this.getInit()
})

就这样就可以正常上传文件

在这里顺便也记一下下载后端返回的文件资源

axios.get(url, {
responseType: 'blob', //重要
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
let fname = 'report.pdf';
link.href = url;
link.setAttribute('download', fname);
document.body.appendChild(link);
link.click();
})

url为后台返回的资源地址,这里会报跨域的错,找后台设置一下就好了

注:测试的时候发现在火狐浏览器上会报错 Argument 1 of FormData.constructor does not implement interface HTMLFormEle

自需要做如下更改就好

//var img_file = this.$refs.inputs;
//var evt=window.event || el;
//console.log(evt)
var img_file = evt.target.files[0];
console.log(img_file)
var formData = new FormData(document.getElementById('uploadForm')[0]);
//var fileObj = img_file.files[0];
var fileObj = img_file
console.log(formData)
formData.append("dsc","dsc");
formData.append("file",fileObj);
console.log(fileObj)
this.instance.post(url,formData).then((res)=>{
this.getInit()
})

vue中上传文件之multipart/form-data的更多相关文章

  1. vue中上传文件相同文件名没反应

    vue项目中会遇到上传文件的需求,jquery会有一些插件很方便,如果不使用插件网上的方法没有太容易的而且很多是原生JS或者基于jQuery操作dom结构的.那么在vue项目中如何实现呢,还有如何模拟 ...

  2. vue 上传文件 和 下载文件

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  3. vue 上传文件 和 下载文件 面试的时候被问到过

    Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...

  4. 使用curl 上传文件,multipart/form-data

    使用curl 上传文件,multipart/form-data 1. 不使用-F,curl内置multipart/form-data功能: 2. 文件内容与真实数据无关,用abc代替数据,依然可以上传 ...

  5. form表单上传文件使用multipart请求处理

    在开发Web应用程序时比较常见的功能之一,就是允许用户利用multipart请求将本地文件上传到服务器,而这正是Grails的坚固基石——spring MVC其中的一个优势.Spring通过对Serv ...

  6. axios+Vue上传文件显示进度

    一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...

  7. element-ui中上传文件upload

    <el-upload class="upload-demo" name="targetFile" ref="upload" :with ...

  8. Vue上传文件:ElementUI中的upload实现

    一.上传文件实现 两种实现方式: 1.直接action <el-upload  .利用before-upload属性 此种方式有个弊端,就是action是必选的参数,那么action如果和pos ...

  9. vue上传文件

    <div> <input type="file" class="file" name="file" @change=&qu ...

随机推荐

  1. 多线程处理list

    package com.zhx.web.invoice.service; import java.util.*; import java.util.concurrent.Callable; impor ...

  2. udf提权

    0x00前言: udf提权是通过数据库来实现获取目标的管理员的shell,来达到从低权限提权到高权限 0x01什么是udf: udf(Userdefined function)是用户自定义函数 在my ...

  3. 原生js实现双向数据绑定

    一.两个model之间的双向绑定 var o = { a: 0 } o.b = o.a + 1; console.log(o.a); // "0" console.log(o.b) ...

  4. PBRT笔记(5)——相机模型

    Camera class Camera { public: //实现相机在一定时间内进行特定的运动 AnimatedTransform CameraToWorld; //快门开/关数据,可以用于计算动 ...

  5. PBRT笔记(4)——颜色和辐射度

    SPD 光谱功率分布 CoefficientSpectrum 根据给定采样数表示光谱,为RGBSpectrum.SampledSpectrum的父类. 重载大量的基础代码,比较简单不做赘述.其中为了方 ...

  6. Python-简单的爬虫语句

    今天做一个简单的天气查询的程序,主要用到Urllib2(python自带的),和Json(Java Script Object Notation,JavaScript 对象表示法),安装步骤: jso ...

  7. Chapter 4 : Control Structures 1 : Selection

    Although it need not be, the expression is usually an identifier. Whether it is an identifieror an e ...

  8. CSS(五)

    定位 关于定位 我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下: relative 生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进 ...

  9. haskell实现简易计算器

    > module Main where > import System.IO > import Data.Char > import Control.Monad > im ...

  10. debian包的补丁管理工具:quilt

    最近项目是改pam软件包,给里面添加一些功能.其中遇到了更改后,代码提交方式的问题.这里转载的文章介绍了使用quilt管理补丁的详细方法: 转自:http://blog.csdn.net/fmddlm ...