精华内容
下载资源
问答
  • vue使用axios上传图片

    万次阅读 2019-06-13 19:24:13
    使用form表单上传图片 <title></title> , initial-scale=1"> <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"> <script src="https://cdn.bootcss.com/axios/0.16.2/axios.js"> 请...

    参考:https://www.cnblogs.com/rachelch/p/8462877.html

    html部分,可以把input file的opacity设置为0,点击其父容器,即触发file

    <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update($event)"/>

    axios的post请求,发送form数据部分,这样就可以无刷新的提交form数据到后台

    复制代码

           update(e){
                    let file = e.target.files[0];           
                    let param = new FormData(); //创建form对象
                    param.append('tweetPic',file,file.name);//通过append向form对象添加数据     
                    //param.append('chunk','0');//添加form表单中其他数据
                    //console.log(param.get('tweetPic')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去
                    let config = {
                        headers:{'Content-Type':'multipart/form-data'}
                    };  //添加请求头
                       axios.post('url/',param,config)
                    .then(response=>{
                        console.log(response.data);
                    })        
                }                

    复制代码

     

    【扩展】

    使用form表单上传图片

    复制代码

    <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>
      <script src="https://cdn.bootcss.com/axios/0.16.2/axios.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>

    复制代码

    展开全文
  • 微信公众号H5上传照片的时候前端进行压缩后上传 由于使用canvas转blob流的兼容性问题,导致如ios 10.0系统等出现异常 表现为提交按钮一直处理提交中,既没有返回错误提示,也没有表示完成,卡在那里没反应 难点 ...

    原文链接:https://dsx2016.com/?p=991

    微信公众号:大师兄2016

    场景

    微信公众号H5上传照片的时候前端进行压缩后上传

    由于使用canvasblob流的兼容性问题,导致如ios 10.0系统等出现异常

    表现为提交按钮一直处理提交中,既没有返回错误提示,也没有表示完成,卡在那里没反应

    img

    难点

    如果是本地测试还好,能够针对性的调试和兼容

    但是上述问题都是基于庞大的用户基数暴露在线上

    同时因为涉及到敏感信息和用户反馈的积极性,导致很难排查问题,只能了解到机型等信息

    也因为涉及到文件流体积较大,反馈时间比较长,受网速等影响,用户可能等到一半就不等了,以为有问题

    运营既没有反馈60stimeout 吐司提示,后台也说没有看到错误日志,没有用户的录屏截图,无法获取关键信息

    但是因为前端是表现层,图片无法上传是比较严重的现象,这种场景下,连用户是否真正发起http请求都不能完全确定

    img

    改进

    原先是只提交canvasblob流,在遇到兼容等异常问题时,无法提交图片等

    做了容错处理后,在点击提交时,如果检测到没有压缩后的blob流,则上传选择照片时的源file(虽然没有压缩但好过上传失败)

    但是仅此一点仍然无法很好的解决问题,因为上传时间过长,本身就是一种问题

    如果证明前端已经发起了http请求,并且在超时前给用户足够明显的反馈信息呢?

    同时也是给自己排查信息的时候,了解真正的网速和错误反馈等信息.

    那就是设置进度条,最好是带有数值的进度条,这样网速快慢,上传进度一目了解.

    img

    思考

    容错处理

    在使用htmlcanvas的插件的时候,文档上并没有catch的容错处理,所以下意识的忽略了错误的场景.

    后来在处理异常的时候,监听文件最后的文件流file或者blob是否存在,存在则提交对应的数据.

    try catch也使用了,因为没有埋点上报,只能尽可能的考虑错误的场景

    img

    文件进度

    本意是打算看看axios提供的方法有没有可以定位http已经发起请求的功能

    然后看到axios本身就有提供文件上传下载的进度值方法,进度有值,本身就代表请求中

    其实回归到产品原型设计,在文件上传和下载的地方,最好有应该有当前进度提示,无论是数值还是进度条

    onUploadProgress: function (progressEvent) {
        // Do whatever you want with the native progress event
    }
    ​
        // `onDownloadProgress` allows handling of progress events for downloads
        // browser only
    onDownloadProgress: function (progressEvent) {
        // Do whatever you want with the native progress event
    }
    展开全文
  • 主要介绍了vue使用axios上传文件(FormData)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 项目中需要上传图片到服务器。最初思路使用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上传文件

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

    1.安装axios

    cnpm i axios -S

    2.方案一:修改原型链

    首先,在main.js中引入

    在这个时候,你还是无法在组件中使用axios的,但如果将vue改为vue的原型链,就可以解决这个问题,如下图

    开始发送请求

    //获取表单中的file	
    var file_obj = document.getElementById('fileaaa').files[0];
    		alert(file_obj)
    		console.log(file_obj);
    		let formdata = new FormData()
    		formdata.append('file', file_obj)
    		formdata.append('title', "sadasdsa")
    		formdata.append('url', "urlsadsasaassad")
    
    		this.$ajax.post('/index/addBanner', formdata, {
    		    headers: {
    			    "Content-Type": "multipart/form-data"
    				         }
    					})
    					.then(function(response) {
    						console.log(response);
    					})
    
    			},

    成功

    展开全文
  • 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); ...
  • vue+axios上传文件

    万次阅读 2018-01-11 16:34:51
    vue+axios上传文件
  • 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 上传文件 --- FormData

    万次阅读 2018-02-28 15:51:20
    在此主要介绍 如何使用 formData 对象上传单文件和多文件,FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。 过多介绍不说,过多的...
  • 主要为大家详细介绍了vue实现axios图片上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • https://segmentfault.com/a/1190000012487177
  • axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要给大家介绍了vue项目中使用axios上传图片等文件操作,需要的朋友参考下吧
  • 1.antd代码 <template> <div> <a-form ref="addForm" :form="form" @submit.prevent="onSubmit" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" > <...a-in
  • 最近在学习axios,然后项目就用到了,所以这篇文章主要给大家介绍了关于vue中利用axios实现文件上传进度的实时更新的相关资料,文中先对axios进行了简单的介绍,方法大家理解学习,需要的朋友们下面随着小编来一起...
  • vue使用axios上传文件,直接引入axios上传可以实现。但是使用挂载在原型上时this.$axios这中方式就不可以,求大佬讲解下问什么呢? 一 直接引入axios 二 挂载在原型上时this.$axios
  • 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....
  • 首先先引入axios,我这里是单文件引入,没有使用封装 import axios from 'axios' 主要用到的参数有 videolist: [], // 视频合集 progress: 0, // 进度条 需要个触发选择文件上传的按钮 这里用的elenemt做为布局 ...
  • 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 ...
  • 2.我才用的的vue+axios框架,因为axios封装的时候默认的responseType = 'json',所以只能接受一些JSON格式的数据处理,但是后台文件返回的是二进制流,那么我们就首先需要将响应类型重新设置了。这里我选用了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,458
精华内容 3,783
关键字:

vue使用axios上传图片

vue 订阅