精华内容
下载资源
问答
  • vue+axios上传文件

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

    单独上传文件:

    <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'}
            }; //添加请求头
            this.$http.post('http://127.0.0.1:8081/upload',param,config)
              .then(response=>{
                console.log(response.data);
              })
          }
        }

    Form表单上传文件:

    <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'
                  }
                }
     
                this.$http.post('http://127.0.0.1:8081/upload', formData, config).then(function (response) {
                  if (response.status === 200) {
                    console.log(response.data);
                  }
                })
              }
            }



    展开全文
  • 主要介绍了vue使用axios上传文件(FormData)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue 通过axios 获取上传进度条vue 通过axios 获取上传进度条对接接口示例方法:注意事项使用axios 需要安装 axios并导入如何实现进度条文件信息获取 vue 通过axios 获取上传进度条 对接接口示例方法: toUploadVideo...

    vue 通过axios 获取文件上传进度条

    对接接口示例方法:

    {

    toUploadVideo(file) {
      // file为文件信息 
      const that = this
      const token = 'token值'  //若后端不需要token验证,则不需传入
      const url = '请求地址' 
      axios({
        method: 'post',
        url,
        data: file,
        headers: { 'Content-Type': 'multipart/form-data', token },
        onUploadProgress: function(progressEvent) {
          const complete = parseInt((progressEvent.loaded / progressEvent.total * 100 | 0))
          // 这里为上传的进度
          that.progress = complete
        }
      }).then(res => {
      	// 上传成功后续处理
        const { data } = res
        if (data.success) {
          that.$message.success('上传完成!')
        }
      }).catch(err => {
      	// 捕获异常并处理
        console.log(err)
        that.$message.success('上传失败!')
      })
    }
    

    }

    注意事项

    使用axios 需要安装 axios并导入

    npm install axios --save 或者 cnpm install axios --save(在终端输入)
    import axios from 'axios' (在接口方法文件中引入)
    

    如何实现进度条

    在data中定义progress,接口中已对progress进行动态修改
    将progress 绑定到进度条上即可
    代码如下
    {

    data() {
       return {
       		progress: 0
    	}
    }	
    

    }
    在这里插入图片描述
    css样式
    {

    .process{
    	 height: 7px;
    	 color:#ccc;
    	 margin: 10px 70px 0;
    	 border-radius: 100px;
    	 background-color: #CCC;
    	 position: relative;
        .process-bar{
           height: 7px;
           background-color: #1890ff;
           border-radius: 100px;
           position: absolute;
           left: 0;
      	}
    }
    

    }

    文件信息获取

    {

    getFile (e){
      const $target = e.target || e.srcElement
      const tempFile = $target.files[0]
      const file = new FormData()
      file.append('file', tempFile)  // 上传文件信息
      // 文件限制
      if (tempFile.size > 1024 * 1024 * 10) {
        return this.$message.error('请上传小于10M的视频!')
      } else if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) === '-1') {
        return this.$message.error('请上传正确的视频格式')
      }
    }
    

    }

    展开全文
  • 项目中需要上传图片到服务器。最初思路使用input选择图片后获取base64,直接传送base64编码到后台。在change方法里边通过FileReader()获取base64就完事了.headImgChange( e ) {let self = this;let reader = new ...

    项目中需要上传图片到服务器。最初思路使用input选择图片后获取base64,直接传送base64编码到后台。

    在change方法里边通过FileReader()获取base64就完事了.

    headImgChange( e ) {

    let self = this;

    let reader = new FileReader();

    reader.readAsDataURL( e.target.files[ 0 ] );

    reader.onload = function ( e ) {

    self.headImg = e.target.result; //img base64

    }

    }

    后面在axios.put的时候才知道后台同学使用的Django检验的是一个文件流,大概是文件流吧,据他说法需要用form表单提交.

    为了顺便弄清楚form表单和ajax,决定用ajax代替form表单提交上传文件。

    最浅显的区别就是form有action属性,会发生页面跳转刷新,ajax则异步请求,刷新局部。

    于是一查,使用new formData();可以实现表单提交;

    let data = new FormData();

    data.append("user_pic",userPic); //图片

    data.append("gender",gender === "男"? 1 : 0); //性别

    data.append("mobile",phone); //手机号码

    data.append("nickname",username); //名称

    console.log( data.get("user_pic") ); //需要get才能查看到数据0.0

    于是直接axios.put发送数据:

    axios.put( url, data, {

    headers: {

    "token": window.localStorage.getItem( "token" ), //token

    }

    }

    )

    .then( res => {

    let msg = res.data;

    console.log( msg );

    } )

    .catch( err => {

    console.log( err );

    } )

    参考这位热心网友分享的经验。

    https://blog.csdn.net/qq_41688165/article/details/80834842

    据他/她介绍,浏览器会自动判断类型给我们加上content-type ,自动加入的content-type里面就会有boundary;

    一查发的put请求,确实有这么一个content-type,感谢普及!

    3aed1d50355054c9d9ee092c1a91cc53.png

    原文:https://www.cnblogs.com/otis-oc/p/10388650.html

    展开全文
  • vueaxios上传文件

    2020-08-24 10:49:20
    找原因摘来找去是因为我封装了axios,有请求拦截,给拦截掉了,找到一个axios封装上传文件请求的,下面代码时axios.js中的。 注:axios设置baseURL时注意,这个设置成固定的会有问题,当你的网站是https请求时你...

    上传文件不成功,把form的格式改成enctype="multipart/form-data"这样都不行。找原因摘来找去是因为我封装了axios,有请求拦截,给拦截掉了,找到一个axios封装上传文件请求的,下面代码时axios.js中的。

    注:axios设置baseURL时注意,这个设置成固定的会有问题,当你的网站是https请求时你要设置成https协议,是http请求时你要设置成http协议,当你的网站只是一种协议可以请求时可以固定,但是当你的网站两个协议都可以请求时就不能写si了。

    比如:axios.defaults.baseURL = 'https://www.***.com/'(写si(固定))

    但是,在本地时要写成固定的,不然请求不成功。

    打包上线时改成灵活性的,不论你是一种请求协议还是两种;axios.defaults.baseURL = window.location.origin(前提是封装axios)

    继续form。

    一般,headers中的'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',这种格式的请求参数是不支持文件类型的。在这里一定要把headers中的'Content-Type'设置成 'multipart/form-data',不然请求不成功,x-manager-token这个字段也不是固定的,是你们后端要求带的token的键名(键值对,前面是键,后面是值,都知道的),不要求带就不加。

    页面请求时:

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

    2019-04-03 16:53:40
    以Form表单形式上传文件 <input type="file" @change="getFile($event)"> <button @click="submitForm($event)">提交</button> metods: { getFile (event) { this.file = event.target....
  • vue使用axios上传文件

    2019-03-21 12:01:39
    在这个时候,你还是无法在组件中使用axios的,但如果将vue改为vue的原型链,就可以解决这个问题,如下图 开始发送请求 //获取表单中的file var file_obj = document.getElementById('fileaaa').files[0]; ...
  • vueaxios上传文件

    2020-08-26 11:22:26
    1.post 请求头改成'Content-...//上传 export function uploadFile(data) { return request({ url: '/appstore/uploadFile', method: 'post', headers: {'Content-Type':'multipart/form-data'}, data: data ...
  • for(var key in fileList){ //选择多文件使用循环遍历添加 formdata.append('special_img[]',fileList[key].file) } updata(formdata).then(res=>{ console.log(res) }) .catch(function (error) { Toast(...
  • Vue使用axios上传文件

    2019-04-27 11:59:00
    axios.post( 'http://localhost:3006/common/upload' , data, { headers: { 'Content-Type': 'multipart/form-data' , }, }).then(res => { console.log(res); }). catch (err => { console.log(err); ...
  • &lt;template&gt; &lt;div class="upload-area-wrap"&gt; &lt;div class="upload-area"...上传文件 - file upload&lt;/p&gt; &lt;div class="
  • vue+axios上传文件到服务器

    千次阅读 2020-04-03 22:30:52
    上传服务器到首先要借助到FormData来操作,废话不多说直接上代码 <!--前端的代码--> <input type="file" ref="file"/> //请求接口前需要传的参数 let formData=new FormData(); formData.append('...
  • 关于vue+axios上传文件的踩坑分析

    千次阅读 2019-06-28 22:53:00
    上传文件是每个前端...1.使用formData来上传文件,没有使用axios上传文件,之前在学校有做过。生成一个formData对象 let formData = new FormData() formData.append('xxx', 'yyyyy') 通过dom操作获得inpu...
  • vue 使用 axios 上传文件 --- FormData

    万次阅读 2018-02-28 15:51:20
    在此主要介绍 如何使用 formData 对象上传单文件和多文件,FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交...也希望各位大神不吝赐教一: 前台上传文件的表单和响应函数&lt;!--文件上传...
  • 在网上看到的大部分都是通过表单来上传文件,我这里分享一个自己的方法。 vue代码 <div class="admin_box"> <input type="file" @change="changeFile" name="avatar" //注意这里的name要和下面...
  • https://segmentfault.com/a/1190000012487177
  • 最近在学习axios,然后项目就用到了,所以这篇文章主要给大家介绍了关于vue中利用axios实现文件上传进度的实时更新的相关资料,文中先对axios进行了简单的介绍,方法大家理解学习,需要的朋友们下面随着小编来一起...
  • 在项目中,在vue-cli项目中使用axios上传文件到服务器,遇到三个问题 1、上传的参数需要使用new FormData()组织 2、需要设置headers为multipart/form-data 3、解决no multipart boundary was found问题 解决方法 ...
  • 问题描述:最近一个项目中使用axios进行上传和下载,但是上传和下载是需要定义responseType和headers的,这样问题就出来了当你没有权限时候这个接口是抛出一个json数据的,同样上传格式错误也是一个json数据的;...

空空如也

空空如也

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

vue通过axios上传文件

vue 订阅