VUE axios上传图片到七牛的实例代码


Posted in Javascript onJuly 28, 2017

浏览器上传图片到服务端,我用过两种方法:

1.本地图片转换成base64,然后通过普通的post请求发送到服务端。

操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法

2.通过form表单提交。

form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据。但是如果想传输多条form表单数据,需要写很多dom,同时还要写iframe,太麻烦。

目前感觉比较干净的办法就是通过axios的post请求,发送form数据到后台。

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

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

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

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

以下部分是扩展

vue开发环境下,上传图片到七牛

最近着手的约能人项目,需要上传图片到七牛,但是感觉只是简单的上传图片还需要引七牛的js,太麻烦了,就自己一切从简。实现逻辑:获取后台返回的七牛token,然后axios的post请求,发送form数据到七牛。

 七牛的token是其平台封装好的,直接在自己服务器配置就能获取到 在其官网上可以找到直接能用的代码  ,在七牛平台获取到后,返回给前台直接拿就好了

以下是直接上传图片到七牛,不需要安装七牛乱七八糟的js,只需要通过七牛的form表单上传就行了。

update(e){
     let file = e.target.files[0];
     let d = new Date();
     let type = file.name.split('.');
     let tokenParem = {
       'putPolicy':'{\"name\":\"$(fname)\",\"size\":\"$(fsize)\",\"w\":\"$(imageInfo.width)\",\"h\":\"$(imageInfo.height)\",\"hash\":\"$(etag)\"}',
       'key':'orderReview/'+d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate()+'/'+d.valueOf()+'.'+type[type.length-1],
       'bucket':this.domain,//七牛的地址,这个是你自己配置的(变量)
     };
     let param = new FormData(); //创建form对象
     param.append('chunk','0');//断点传输
     param.append('chunks','1');
     param.append('file',file,file.name)
     console.log(param.get('file')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去
     let config = {
      headers:{'Content-Type':'multipart/form-data'}
     };
    //先从自己的服务端拿到token
     this.axios.post(api.uploadToken,qs.stringify(tokenParem))
      .then(response=>{
        this.token = response.data.uploadToken;
        param.append('token',this.token);
        if(this.images.length>8){
          alert('不能超过9张');
          return;
        }
        this.uploading(param,config,file.name);//然后将参数上传七牛
        return;
      })
   },
   uploading(param,config,pathName){
    this.axios.post('http://upload.qiniu.com/',param,config)
     .then(response=>{
      console.log(response.data);
      let localArr = this.images.map((val,index,arr)=>{
       return arr[index].localSrc;
      })
      if(!~localArr.indexOf(pathName)){
       this.images.push({'src':this.showUrl+response.data.key,'localSrc':pathName});
      }else{
        alert('已上传该图片');
      }
     })
   },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
axios学习教程全攻略
Mar 26 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
JavaScript中的几种继承方法示例
Dec 06 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 #jQuery
完美实现js拖拽效果 return false用法详解
Jul 28 #Javascript
webpack 2的react开发配置实例代码
Jul 28 #Javascript
基于AngularJS实现表单验证功能
Jul 28 #Javascript
AngularJS service之select下拉菜单效果
Jul 28 #Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 #Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 #Javascript
You might like
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python小技巧之批量抓取美女图片
2014/06/06 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
python3.4爬虫demo
2019/01/22 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
python爬虫中多线程的使用详解
2019/09/23 Python
python装饰器练习题及答案
2019/11/01 Python
深入了解python列表(LIST)
2020/06/08 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
关于安全演讲稿
2014/05/09 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书