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中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 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的知识
2006/11/17 PHP
PHP获取网卡地址的代码
2008/04/09 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
新大陆软件面试题
2016/11/24 面试题
承办会议欢迎词
2014/01/17 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
检讨书模板大全
2015/05/07 职场文书
紫日观后感
2015/06/05 职场文书
python如何在word中存储本地图片
2021/04/07 Python
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL