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的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 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在线生成ico文件的代码
2007/10/09 PHP
php如何连接sql server
2015/10/16 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
PHP创建XML接口示例
2019/07/04 PHP
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
js运动应用实例解析
2015/12/28 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
python中input()与raw_input()的区别分析
2016/02/27 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
python实现简单http服务器功能
2018/09/17 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
tornado+celery的简单使用详解
2019/12/21 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
元旦活动感言
2014/03/08 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
党支部活动策划方案
2014/08/18 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL