vue

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问题)

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

上一篇下一篇

猜你喜欢

热点阅读