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 相关文章推荐
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
layui table单元格事件修改值的方法
Sep 24 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
合作指挥官:孟斯克
2020/03/16 星际争霸
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
基于Jquery的温度计动画效果
2010/06/18 Javascript
web前端开发也需要日志
2010/12/09 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
原生js实现日期联动
2015/01/12 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
package.json文件配置详解
2017/06/15 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Python分治法定义与应用实例详解
2017/07/28 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
python Tornado框架的使用示例
2020/10/19 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
银行资信证明
2015/06/17 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers