精华内容
参与话题
问答
  • axios 实现 文件上传

    万次阅读 2018-12-19 15:32:10
    在一次使用axios中实现文件上传时遇到一个问题。觉得对于上传这方面还不是很了解,就决定好好了解一下这方面的知识。 首先列出问题: 我使用的是FormData实现的上传,因为移动端浏览器版本一般比较高,所以不考虑...

    在一次使用axios中实现文件上传时遇到一个问题。觉得对于上传这方面还不是很了解,就决定好好了解一下这方面的知识。

    首先列出问题:

    我使用的是FormData实现的上传,因为移动端浏览器版本一般比较高,所以不考虑兼容性问题。

    代码是这样的:

    changefile(file){
    	var forms = new FormData()
    	var configs = {
    		headers:{'Content-Type':'multipart/form-data'}
    	};
    	forms.append('file',file.target.files[0])
    				 
        this.axios.post(this.$config.uploadImg,forms ,configs).then(res=>{
    		console.log(res)
    	})
    }

    后台接受的参数也是file。

    因为是上传文件,所以把headers的content-type设为了multipart/form-data,也没毛病,但是测试了发现报错。

    请求体也没有。

    应该是请求体和请求类型不一样吧,请求类型设置的是form-data,请求体应该是一个文件,难道不是文件吗。

    突然想到之前有对axios做过请求拦截,是不是那里改变了请求体。

    axios.interceptors.request.use((config) => {
      Vue.$vux.loading.show({
         text: 'Loading'
      })
      if(config.method  === 'post'){
        if(config.headers['Content-Type'] !== 'application/json'){
          config.data = qs.stringify(config.data);
        }else{
          config.data = config.data;
        }
      }
      return config;
    },(error) =>{
      return Promise.reject(error);
    });

    果然!这里返回了一个对象。把拦截去掉就好了。

    既然问题原因找到了,那么就得想怎么解决了,这里的拦截是对参数进行序列化的,如果不写在这里那么所有的接口请求都得写那岂不是麻烦死。

    看了后发现是不是傻,只有一种情况需要qs序列化,那就是type为application/x-www-form-urlencoded。

    所以只要设置默认type为application/x-www-form-urlencoded

    axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';

    然后判断一个就可以了。

    当你需要上传文件时,单独设置type即可,那样就不会进入判断。

    注意:如果不设置axios的默认type,那么axios会自动根据传的参数,来选择使用什么type。

    展开全文
  • axios+formdata 上传文件

    千次阅读 2019-06-01 10:07:38
    最近项目要做文件上传,作为萌新表示这种操作有点鸭梨,知之为知之不知百度知,好吧百度说formdata 好那我们就动手了 首先照着formdata文档来先new 一个对象 let formData = new FormData() formData.append('xxx'...

    最近项目要做文件上传,作为萌新表示这种操作有点鸭梨,知之为知之不知百度知,好吧百度说formdata 好那我们就动手了

    首先照着formdata文档来先new 一个对象

    let formData = new FormData()
    formData.append('xxx', 'yyyyy')
    跑一遍没报错,好像是可以的,但是就是console直接打印是空的,看文档说要这么干:

    console.log(formData.get('xxx'))

     

    由于业务需要,axios配置了拦截器,在里面做了数据处理

    axios.interceptors.request.use(function (config) {
        // 在发送请求之前做了坑爹的数据处理
        return config;
      }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
      });
    这个数据把我们的数据类型变成了Object,so,浏览器给出的是application/json,

    解决办法1:

    就是 重新creat一个纯净的axios请求,挂载到vue原型里,然后重新请求,这个时候发现请求成功,后台也接收到文件数据,完美!!

    解决办法2:

    processData:false // 告诉axios不要去处理发送的数据(重要参数)

    let formData = new FormData()
    formData.append('file',e.target.files[0])
    this.$axios({
        url:url,
        method: 'post',
        data: formData,
        processData: false,// 告诉axios不要去处理发送的数据(重要参数)
        contentType: false,   // 告诉axios不要去设置Content-Type请求头
    }).then((res)=>{
        console.log(res)
    })
    

     

    展开全文
  • 1、用js的formData对象上传(服务器返回url地址) <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/> methods: { update(e){ let file = e....

    1、用js的formData对象上传(服务器返回url地址)

    <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
    
    
    methods: {
          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'} //这里是重点,需要和后台沟通好请求头,Content-Type不一定是这个值
            }; //添加请求头
            axios.post('http://127.0.0.1:8081/upload',param,config)
              .then(response=>{
                console.log(response.data);
              })
          }
        }
    

    2、Form表单上传(服务器返回url地址)

    <form>
        <input type="text" value="" v-model="name" placeholder="请输入用户名">
        <input type="text" value="" v-model="age" placeholder="请输入年龄">
        <input type="file" @change="getFile($event)">
        <button @click="submitForm($event)">提交</button>
    </form>
    
    	data: {
              name: '',
              age: '',
              file: ''
            },
            methods: {
              getFile(event) {
                this.file = event.target.files[0];
                console.log(this.file);
              },
              submitForm(event) {
                event.preventDefault();
                let formData = new FormData();
                formData.append('name', this.name);
                formData.append('age', this.age);
                formData.append('file', this.file);
     
                let config = {
                  headers: {
                    'Content-Type': 'multipart/form-data'
                  }
                }
     
                axios.post('http://127.0.0.1:8081/upload', formData, config).then(function (response) {
                  if (response.status === 200) {
                    console.log(response.data);
                  }
                })
              }
            }
    

    注意:表单form加上属性enctype="multipart/form-data"。客服端发送的头部就是:

    Content-type: multipart/form-data, boundary=AaB03x--AaB03x//后面这个是浏览器假的随机值

    提交成功客服端还能看到以下图片相关内容:

    3、获取相机图片的base64

        /**
         * 获取用户拍照的图片信息
         */
        async Photograph() {
          // 获取用户拍照的图片名字,显示到页面上
          this.fileName = this.$refs.photoref.files[0].name;
          // 获取图片base64 代码,并存放到 base64ImgData 中
          this.base64ImgData = await this.FileReader(this.$refs.photoref.files[0]);
        },
        /**
         * 返回用户拍照图片的base64
         */
        FileReader(FileInfo) {
          // FileReader 方法参考地址:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
          let reader = new FileReader();
          // readAsDataURL 方法参考地址:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL
          reader.readAsDataURL(FileInfo);
          // 监听读取操作结束
          /* eslint-disable */
          return new Promise(
            resolve => (reader.onloadend = () => resolve(reader.result))
          );
        }

     

    展开全文
  • 在使用axios进行上传文件的坑

    万次阅读 2018-06-15 16:50:24
    在使用axios进行文件上传时,后台的grails程序经常或出现不能获取file的情况 No signature of method No signature of method: org.springframework.security.web.servletapi.HttpServlet3RequestFactory$Servlet3...

    在进行文件上传后台报错

    在使用axios进行文件上传时,后台的grails程序经常或出现不能获取file的情况 No signature of method

    No signature of method: org.springframework.security.web.servletapi.HttpServlet3RequestFactory$Servlet3SecurityContextHolderAwareRequestWrapper.getFile() is applicable for argument types: (java.lang.String) values: [inputFile]
    Possible solutions: getXML(), getPart(java.lang.String), getAt(java.lang.String), getAt(java.lang.String), getLocale(), getJSON(). Stacktrace follows: 
    java.lang.reflect.InvocationTargetException: null

    经过排查不是后台程序的问题,在前端上传的时候,需要对数据进行处理
    如下处理就能正常获取上传的文件了

     html:
     选择文件: <input type="file" name="fileUpload" id="fileUp" @change="change($event)" ref="inputFile" >
    
     vuejs:
         change:function(event){
            this.file = event.target.files[0]
          },
          upFile:function(event){
            var data = new FormData();//重点在这里 如果使用 var data = {}; data.inputfile=... 这样的方式不能正常上传
            data.append("inputFile",this.file)
            data.append("title","thisAGoodTitle")
            console.log(data)
            // var cfg = {
            //   'Content-type':'multipart/form-data'
            // }
             let headers = {headers: {"Content-Type": "multipart/form-data"}}
                this.$http.post("http://localhost:8081/api/peixun/vedio/uploadVideo",data,headers).then(function(data){
                console.log(data);
              },function(err){
                console.log("err------: ");
                console.log(err);
              })
          }
    后端:
    def file = request.getFile('inputFile')
    file.transferTo(new File(path,newName))//写到磁盘

    这样就能将前端的文件上传到服务器端了
    如果不使用这种header,直接将文件按照如下上传 也是可以正常完成上传的

     // let headers = {headers: {"Content-Type": "multipart/form-data"}}
    this.$http.post("http://localhost:8081/api/peixun/vedio/uploadVideo",data).then(function(data){...})

    到此,axios进行文件上传的问题解决了
    标记此文,以后遇到这个问题不用到处找了

    展开全文
  • 一、Axios的常用方法 安装 使用npm npm install axios 引入axios import axios from 'axios'; 执行get请求 get方法一 get(url) //url请求地址 .then(res=>{ console.log("请求成功时",res) //请求成功是返回...
  • axios 上传和下载文件

    2020-04-13 11:35:42
    文章目录文章参考前台 axios 上传下载FormData 介绍axios 上传文件步骤构造formData请求头的配置`multipart/form-data`axios发送请求axios 下载文件综合案例后台定义上传和下载前端axios上传下载 文章参考 FormData...
  • vue+axios上传文件

    万次阅读 2018-01-11 16:34:51
    vue+axios上传文件
  • axios上传文件

    万次阅读 2019-03-20 10:59:46
    主要是用FormData对象的使用 <template> <div class="cancelRequest"> <div>姓名:<input type="text" v-model="name"></div> <...input type="file" ref="f...
  • 此方法主要是使用FormData数据进行文件上传;FormData是XMLHttpRequest Level2提供的一个接口对象,提供了一种表单数据的键值对的构造方法,经过它的数据处理可以使用XMLHttpRequest.send( )方法送出;如果送出时...
  • 数据格式采用 FormData 请求头设置:Content-Type: multipart/form-data; boundary=----...let file=所选取的文件 let formData = new FormData(); formData.append('paramId',1) formData.append(...
  • axios上传文件以及遇到的问题

    千次阅读 2018-12-13 11:27:27
    axios上传文件以及遇到的问题 1,这里上传文件使用的是elementUI的上传,也用原生的input上传写了,但是没有时间做多文件上传,下面会把代码贴出。 2,这里上传文件我是先获取OSS权限和上传路径,然后再上传。但是...
  • axios上传文件数组

    2020-06-22 11:50:07
    axios上传文件 vue + element + axios 我用的是element的upload组件,但并未用element的上传只是用的element组件的文件fileList和样式 普通的上传文件是着这样的 var formdata = new FormData() // 创建form对象 ...
  • vue+axios上传文件

    2019-02-19 17:28:43
    单独上传文件:   &lt;input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/&gt; methods: ...
  • NodeJS环境下使用axios上传文件

    千次阅读 2020-03-15 00:02:58
    最近有个需求,需要在nodejs后端上传图片到云存储服务器,刚好对axios这个库比较熟悉,因此便开始在网上查资料,但是网上大多的都是用axios在前端上传文件的代码,即是基于浏览器环境的。后来找到了基于Nodejs环境的...
  • 使用axios上传文件

    2019-07-07 05:13:57
    export const uploadFile = file => { const param = new FormData(); param.append("file", file.file); const config = { headers: { "Content-Type": "multipart/form-data" } };... axio...
  • axios上传文件,服务端接收数据为空, 客户端报错: Error: Request failed with status code 400
  • 上传服务器到首先要借助到FormData来操作,废话不多说直接上代码 <!--前端的代码--> <input type="file" ref="file"/> //请求接口前需要传的参数 let formData=new FormData(); formData.append('...
  • 最近在做上传视频,因为视频比较大,耗时较长,要是没有个进度的话,用户漫长等待,体验不好,所以就想实时显示上传进度。 要点是发送请求是配置onUploadProgress: onUploadProgress: progressEvent => { let ...
  • https://segmentfault.com/a/1190000012487177
  • axios上传文件axios 封装按需求写相应的js在需要的页面里使用 axios 封装 按需求写相应的js 我这个是财务那块的,为了方便看,我把其他的函数删除了 /** * finance模块接口列表 */ import axios from "./http"; /...

空空如也

1 2 3 4 5 ... 20
收藏数 7,002
精华内容 2,800
关键字:

axios上传文件