vue+axios文件上传项目实践
2018-10-30 本文已影响60人
好奇的猫猫猫
这几天做项目时涉及到一个“上传文件”的功能实现,没有用组件实现,遇到了一些问题,比如cookie权限,接口代理,传参等问题,特此来总结一下。
首先是样式实现
<input type="file"
style="position:absolute;height:30px;width:100px;z-index:999;opacity:0;"
accept="image/png,image/gif,image/jpeg" onmouseover="this.style.cursor='pointer'"
@change="upFile">
<i-button type="primary" style="width:100px;">上传文件</i-button>
因为用到了一个i-button的样式组件,故在i-button上方写了个隐形的input框
再是上传文件的功能实现
本来没有在api里写接口,尝试通过下面这种方式来实现文件上传。
update(e){
let file = e.target.files[0];
let param = new FormData(); //创建form对象
param.append('file',file);//通过append向form对象添加数据
console.log(param.get('file')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去
let config = {
headers:{'Content-Type':'multipart/form-data'}
}; //添加请求头
axios.post('http://192.168.10.141:3080/Reception/SaveAttachment',param,config)
.then(response=>{
console.log(response.data);
})
}
但是这么写我碰到了一个问题就是cookie问题,后台报错没有登录无权限(但其实我登录了)
后来通过下面的方法解决了cookie问题,先挖个坑,等我搞清楚原因后再来填坑。
// 上传文件
async upFile(e:any) {
let file = e.target.files[0];
let param = new FormData() // 创建form对象
param.append('file', file, file.name) // 通过append向form对象添加数据
param.append('size', file.size) // 添加form表单中其他数据
param.append('stuinfoId','606659')
console.log(param.get('file')) // FormData私有类对象,访问不到,可以通过get判断值是否传进去
let res=await uploadFile(param)
}
通过
param.append('stuinfoId','606659')
实现向后端参数的传递
在api文件里调接口
export const uploadFile = (param: any): Promise<any> => {
return service.post('/Reception/SaveAttachment' , param, {headers: {'Content-Type': 'multipart/form-data'}})
}
因为本人没有刚开始接触项目,不太了解项目结构,后来搞明白调接口的时候要再一个固定的配置文件里vue.config.js加上代理
'/Reception': {
target: 'http://192.168.10.141',
changeOrigin: true,
logLevel: 'debug'
}
好了 这样就完成了文件的上传。希望能够帮到同样有疑惑的你们~
这次要填的坑有:
1.如果自己要手动加cookie该怎么加
2.为什么写在api文件里就可以解决cookie问题
3.后端接口是怎么识别我已经登陆的了(同样是cookie问题)
欢迎大家一起来填坑~~~