原⽣js上传图⽚遇到的坑（axios封装）后台给我写了⼀个上传图⽚的接⼝，⾃⼰⽤form表单测试成功
接⼝可以正常跳转
测试的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<form method="POST" action="192.168.79.191:8889/api/upload/uploadFile" enctype="multipart/form-data">
<table>
<tr>
<td><label path="file">Select a file to upload</label></td>
<td><input type="file" name="file" id="upload_file"/></td>
</tr>
<tr>
<td>fileGroup: <input name = "fileGroup" type = "text"><br></td>
</tr>
<tr>
<td>flag:<input name = "flag" type = "text"><br></td>
</tr>
<tr>
<td><input type="submit" value="Submit"/></td>
</tr>
</table>
</form>
</body>
</html>
View Code
因为这样⽤form表单提交的时候会⾃动跳转，所以就想到⽤js模拟form表单提交
代码⼀写完，问题来了，⽤axios请求不成功，
let file = e.target.files[0]
var formData = new FormData()
formData.append('file', file)
this.$ajax.post(Api.uploadFile, formData).then(function(response) {
alert(123)
//this.$refs.loading.show()
if (response.data.status === -1) {
//this.promptText = response.data.msg
/
/this.$refs.prompt.show()
} else {
//this.front_pic = this.publicUrl + response.data.data.url // 提交图⽚获取URL，返回
}
}, function() {
this.promptText = '请求失败'
this.$refs.prompt.show()
})
然后我想axios不成功，那我换成了原⽣的ajax请求应该⾏了吧结果还是不成功，代码如下
/*原⽣请求⽅式 */
let xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
xhr.open("post", "localhost:8082/api/files/api/upload/uploadFile", true); //post⽅式，url为服务器请求地址，true 该参数规定请求是否异步处理。xhr.setRequestHeader('content-type', 'multipart/form-data')//不要⾃作多情加上这⼀句
//xhr.setRequestHeader('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8')
xhr.send(formData); //开始上传，发送form数据
var data = sponseText;
console.log(data);
}
控制台 network  就是请求不成功，500报错
错误信息如下
整了⼤半天，最后发现是不⽤设置content-type  ⼀去掉就正常了真的是⾃作多情⾃⼰设置了content-type导致请求不成功总结问题：
第⼀：axios不成功
原因：
1、⾃作多情设置了content-type（李阿敏）
//http request
quest.use(
config => {
config.headers = {
//'Content-Type':'application/x-www-form-urlencoded'
'Content-Type': 'multipart/form-data'
}
return config;
},
error => {
ject(err);
}
);
2、axios可能将请求污染
解决办法：
请求之前先new ⼀个全新的axios  如下
uploadImage(e){
let instance = ate();//请求之前先new⼀个全新的axios
let file = e.target.files[0]
const formDate = new FormData()
formDate.append('file', file)
instance.post('/files/api/upload/uploadFile',formDate).then((res)=>{
console.log(res);
if(res.status && res.status == 500){
<='⽤户名或密码错误！'
}else if(res.access_token){
let millisecond = new Date(new Date().getTime() + pires_in * 1000);  //access_token过期时间
cookies.set('access_token',res.access_token,{expires: millisecond});    //设置cookie
this.$place("/");  //登录到⾸页
}
})
}
上⾯代码：正常，可以请求成功，问题得到解决
第⼆：原⽣的ajax不成功
原因设置了content-type
解决办法：将content-type去掉
上传图⽚组件代码
<template>
<div class="param-pannel">
<common-prm/>
<border-prm myStyle="style" />
<collapse-item title="图⽚">
<div class="param-gap">
<label class="left" for="">路径 :</label>
<div class="right">
<input type="file"
name="file"
ref="input"
enctype="multipart/form-data"
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"                    multiple="multiple"
@change="getFile"jquery在线图片
class="data-value" />
</div>
</div>
</collapse-item>
</div>
</template>
<script>
import axios from 'axios'
import mixins from '../paramMixins.js'
import Api from '@frameworks/conf/api'
export default {
name: 'ImgParam',
mixins: [mixins],
data() {
return {
textName: '⽂本'
}
},
methods: {
getFile(e) {
//验证
if (e.target.files[0].size >= 1048576) {
alert("上传图⽚⼤⼩不得超过1M");
return false;
}
// 预览图⽚
var reader = new FileReader();
let _this = this
return function(e) {
var datainfo = sult;
_this.params.images = datainfo
_this.updateData()
};
})(e.target.files[0]);
//上传
this.upload(e.target.files[0])
},
//调⽤上传图⽚的接⼝上传
upload(file){
var formData = new FormData()
formData.append('file', file)
/*axios请求⽅式 */
this.$ajax.upload(Api.uploadFile, formData).then(function(response) {
if (response.data.status === -1) {
alert()
} else {
}, function() {
this.promptText = '请求失败'
this.$refs.prompt.show()
})
//axios封装的post请求（不成功）
/*this.$ajax.post(Api.uploadFile, formData).then(function(response) {
alert(123)
}, function() {
this.promptText = '请求失败'
this.$refs.prompt.show()
})*/
/*原⽣请求⽅式（成功） */
// let xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
// xhr.open("post", "localhost:8082/api/files/api/upload/uploadFile", true); //post⽅式，url为服务器请求地址，true 该参数规定请求是否异步处理。
// //xhr.setRequestHeader('content-type', 'multipart/form-data')
// //xhr.setRequestHeader('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8')
// xhr.send(formData); //开始上传，发送form数据
// adystatechange = function () {
//    var data = sponseText;
//    console.log(data);
// }
}
}
}
</script>
<style scoped lang="scss">
.param-pannel input,
.param-pannel select {
border: 1px solid #ddd;
width: 100%
}
.param-pannel>div {
padding: 5px 0;
}
</style>
<style scoped lang="scss">
@import '../../../assets/css/params_common.scss';
</style>
View Code
封装的axios
import axios from 'axios';
import {axios_defaults_timeout} from '@frameworks/conf/config'
import qs from 'qs'
axios.defaults.timeout = axios_defaults_timeout;
axios.defaults.baseURL = JSON.v.VUE_APP_MICRO_SERVICE)?v.VUE_APP_v.VUE_APP_SINGLEURL; //填写域名//http request
quest.use(
config => {
config.headers = {
//'Content-Type':'application/x-www-form-urlencoded'
'Content-Type': 'multipart/form-data'
}
return config;
},
error => {
ject(err);
}
);
//响应即异常处理
sponse.use(response => {
return response
}, err => {
if (err && sponse) {
switch (sponse.status) {
case 400:
solve({sponse.status,message:'错误请求'});
break;
case 401:
solve({sponse.status,message:'未授权，请重新登录'});
case 403:
solve({sponse.status,message:'拒绝访问'});
break;
case 404:
solve({sponse.status,message:'请求错误，未到该资源'});
break;
case 405:
solve({sponse.status,message:'请求⽅法未允许'});
break;
case 408:
solve({sponse.status,message:'请求超时'});
break;
case 500:
solve({sponse.status,message:'服务器端出错'});
break;
case 501:
solve({sponse.status,message:'⽹络未实现'});
break;
case 502:
solve({sponse.status,message:'⽹络错误'});
break;
case 503:
solve({sponse.status,message:'服务不可⽤'});
break;
case 504:
solve({sponse.status,message:'⽹络超时'});
break;
case 505:
solve({sponse.status,message:'http版本不⽀持该请求'});
break;
default:
solve({sponse.status,message:'未知错误'});
break;
}
} else {
solve({sponse.status,message:'连接到服务器失败'});
}
sponse)
})
/**
* 封装get⽅法
* @param url
* @param data
* @returns {Promise}
*/
export function fetch(url,params={}){
return new Promise((resolve,reject) => {
<(url,{
params:params
})
.then(response => {
if(response.data) resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* 封装上传图⽚upload的⽅法
* @param url
* @param data
* @returns {Promise}
*/
export function upload(url,data = {}){
let instance = ate();
return new Promise((resolve,reject) => {
instance.post(url,data)
.then(response => {
if(response.data) resolve(response.data);
},err => {
reject(err)
})
})
}
/**
* 封装post请求
* @param url

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。