vue+axios文件上传项目实践

这几天做项目时涉及到一个“上传文件”的功能实现，没有用组件实现，遇到了一些问题，比如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问题）

欢迎大家一起来填坑~~~