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

    2020-12-01 15:10:46
    axios拦截了请求,对请求的数据做了一些处理,而FormData传输文件不需要任何的处理。直接在axios上过载一个方法,躲过axios的拦截 1.找到utils-request.js const service = axios.create({ baseURL: process.env....

    axios拦截了请求,对请求的数据做了一些处理,而FormData传输文件不需要任何的处理。直接在axios上过载一个方法,躲过axios的拦截

    1.找到utils-request.js

    const service = axios.create({
        baseURL: process.env.VUE_APP_BASE_API,
        withCredentials: true,
        timeout: 50000
    })
    Vue.prototype.$instance=service
    

    2.在.vue文件使用

    let formData = new FormData();
    formData.append('name', this.name);
    formData.append('file', file);
    this.$instance.post('/fileupload',formData).then(function () {})
    
    展开全文
  • 项目中需要上传图片到服务器。最初思路使用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

    展开全文
  • vue axios上传文件实例

    2018-04-25 10:53:00
    <head> <title></title> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1">...script src="https://cdn.bootcss.com/vue/2.3.4/v...
    <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src=" https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
    </head>
     
    <body>
    <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>
     
    <script>
    window.onload = function () {
    Vue.prototype.$http = axios;
    new Vue({
    el: '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('/upload', formData, config).then(function (res) {
    if (res.status === 2000) {
    /*这里做处理*/
    }
    })
    }
    }
    })
    }
    </script>
    </body>
     
    </html>

    转载于:https://www.cnblogs.com/peachmeimei/p/8940877.html

    展开全文
  • vue axios 上传文件时修改Content-Type

    千次阅读 2020-10-28 14:19:27
    // 根据后台需求数据格式 const form = new FormData() // 文件对象 form.append('upload_file', file) //文件流参数 form.append('path', 'news') // 添加...axios .post(url, form, { headers: { 'Content-..
     // 根据后台需求数据格式
          const form = new FormData()
          // 文件对象
          form.append('upload_file', file) //文件流参数
          form.append('path', 'news') // 添加form表单中其他数据
          console.log(form)
    
    axios
          .post(url, form, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          })
          .then(res => {
            resolve(res.data)
          })
          .catch(err => {
            reject(err.data)
          })
    
    

     

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

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

    千次阅读 2018-08-17 21:58:51
    input元素type改为file类型, accept限制指定的文件类型,multiple可以多传送文件 &lt;input class="file" name="file" type="file" accept="image/png,image/gif,image/...
  • Vue axios实现文件上传

    2019-10-28 20:50:23
    //通过CommonsMultipartFile的方法直接写文件(注意这个时候) file.transferTo(newFile); long endTime=System.currentTimeMillis(); System.out.println("采用file.Transto的运行时间:"+String.valueOf(endTime-...
  • 主要介绍了vue使用axios上传文件(FormData)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue axios 实现上传文件

    千次阅读 2018-10-19 16:46:36
    1 新建一个用来上传文件axios,不同普通请求后台的axios,因为上传文件不能手动设置请求头  var uploadAxios = axios.create({}),  Vue.prototype.$uploadAxios = uploadAxios;   注意: 不要设置请求头...
  • vue axios实现文件上传后台springboot

    千次阅读 2019-05-23 17:27:01
    //通过CommonsMultipartFile的方法直接写文件(注意这个时候) file.transferTo(newFile); long endTime=System.currentTimeMillis(); System.out.println("采用file.Transto的运行时间:"+String.valueOf...
  • Vue Axios 切片上传文件含实时进度

    千次阅读 2021-01-21 11:26:42
    切片上传一般用于大型文件上传,切成多个部分分开上传。 整体实现思路: 预先设置切片大小。 计算总切片次数 循环调用上传 import axios from 'axios'; /** * 请求参数封装为 FormData 对象 * @param params ...
  • vueaxios上传文件

    2020-08-24 10:49:20
    找原因摘来找去是因为我封装了axios,有请求拦截,给拦截掉了,找到一个axios封装上传文件请求的,下面代码时axios.js中的。 注:axios设置baseURL时注意,这个设置成固定的会有问题,当你的网站是https请求时你...
  • 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....
  • 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上传文件,直接引入axios上传可以实现。但是使用挂载在原型上时this.$axios这中方式就不可以,求大佬讲解下问什么呢? 一 直接引入axios 二 挂载在原型上时this.$axios
  • 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 ...
  • accept设置为"image/png,image/gif,image/jpeg",以接受图片文件 <input class="upload-file" @change="handleUpload($event)" type="file" id="imgUploader" accept="image/png,image/gif,image/jpeg"> 2....
  • 就是把input type=file的opacity置为0,然后在底下放有样式的元素,然后通过axios的onUploadProgress 的参数total和loaded显示进度,当然要在后端返回成功之后再把进度置为100%。然后监听一下文件数组,当所有进度都...
  • <input type="file" ref="fileInput" />...上传</button> upload() { const files = this.$refs.fileInput.files var formData = new FormData(); let config = { headers: { "Content-Ty...
  • vue使用axios上传文件

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

空空如也

空空如也

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

vueaxios上传文件

vue 订阅