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

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.bucket,//七牛的地址,这个是你自己配置的(变量)
};
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('已上传该图片');
}
})
},

axios上传图片(及vue上传图片到七牛))的更多相关文章

  1. 前端使用JS-SDK上传图片(文件)到七牛

    Qiniu-JavaScript-SDK (下文简称为 JS-SDK)适用于 :IE11.Edge.Chrome.Firefox.Safari 等浏览器,基于七牛云存储官方 API 构建,其中上传功能 ...

  2. Yii2.0 下使用 composer 安装七牛

    最近在捣鼓一个网站,要上传图片,于是选择了七牛.由于Yii2.0框架本身并不具有七牛用来上传图片的接口,只能自己动手给Yii2.0框架安装七牛了. 首先在根目录下的 composer.json 进行配 ...

  3. MWEB+七牛 上传图片

    MWEB+七牛 上传图片 博客之前的图片也都用的七牛,但编辑和上传分离还是很麻烦,所以一直很心水meb, 上周mweb降到¥50,感觉短期内应该不会再降了,于是果断入手,今天在和使用图床功能遇到了一些 ...

  4. UEditor上传图片到七牛C#(后端实现)

    由于个人网站空间存储有所以选择将图片统一存储到七牛上,理由很简单 1  免费10G 的容量  ,对个人网站足够用 2  规范的开发者文档 和完善的sdk(几乎所有热门语言sdk) 整体思路 图片上传七 ...

  5. koa-ueditor上传图片到七牛

    问题描述:服务器系统架构采用的是koa(并非koa2),客户端富文本编辑器采用的是百度的ueditor控件.现在需要ueditor支持将图片直接上传到七牛云. 前提:百度的ueditor需要在本地配置 ...

  6. node+express上传图片到七牛

    本人微信公众号:前端修炼之路,欢迎关注 最近做项目的时候有一个上传图片的需求,由于没有后端的配合,所以决定自己来搭个服务器,实现上传图片功能.以后如果需要修改成java或者php为后端,直接使用即可, ...

  7. yii2.0 集合七牛SDK 上传图片到第三方

    首先,请用composer下载七牛phpSDK (具体参考官方文档) composer require qiniu/php-sdk 注册七牛账号 获取 AK SK(密匙) ,创建资源对象 获取doma ...

  8. android上引入七牛 上传图片或者文件 最终整理版本(可用)

    前言: 以下是引入七牛的步骤,以及在七牛中上传文件和获取文件private 私密地址. 生成上传凭证和获取下载凭证 具体如果使用过程有什么疑问可以加QQ(备注:七牛问题). 1:导入相关的包(注意是4 ...

  9. 使用微信 SDK 上传图片到七牛

    总体思路是:在微信下选好图片后将图片上传到微信服务器,在后端使用微信服务器返回的图片 serverId 加上调用接口的 ApiTicket 通过七牛的 fetch 接口向微信服务器下载多媒体文件的接口 ...

随机推荐

  1. Storm Trident状态

    Trident中有对状态数据进行读取和写入操作的一流抽象工具.状态既可以保存在拓扑内部,比如保存在内容中并由HDFS存储,也可以通过外部存储(比如Memcached或Cassandra)存储在数据库中 ...

  2. Alamofire源码导读二:发起请求及内部加锁的逻辑

    以创建一个 DataRequest 为例子  发起请求 创建 SessionManager 顺带也创建了一个 SessionDelegate 持有一个urlSession,持有一个串行的 Dispa ...

  3. day 17python 面对对象之继承

    一:什么面向对象的继承? 比较官方的说法就是: 继承(英语:inheritance)是面向对象软件技术当中的一个概念.如果一个类别A“继承自”另一个类别B,就把这个A称为“B的子类别”,而把B称为“A ...

  4. FineReport9.0定义数据连接(创建与SQL Server 2016数据库的连接)

    1.下载并安装好FineReport9.0和SQL Server 2016 2.开始——>所有应用——>Microsoft SQL Server 2016——>SQL Server ...

  5. java程序连接hive数据库遇到的问题

    今天,打算学习一下用hadoop做后台,搭建一个网站,首先第一步便是在本机的eclipse中连接到虚拟机上的hive中,原本以为很简单,但是过程很是艰难.特意做总结 首先hive的版本问题就是一个很大 ...

  6. c++类定义和类实现

    预备知识: c++中我们cpp文件和.h文件的区别是,cpp文件是需要编译的文件,成为一个独立的编译单元,而h文件从来是不需要编译,只是用于预处理. 通常我们在cpp文件中,完成函数的实现,然后在h中 ...

  7. POJ 1163

    #include<iostream> #include<stdio.h> #include<algorithm> using namespace std; int ...

  8. POJ 1050

    #include <stdio.h> #include <string.h> #define mt 101 int main() { int a[mt][mt]; int st ...

  9. Ubuntu16.04 / OpenCV / Python 源码安装

    为什么需要源码安装? 1. 对 Python 版的 OpenCV,Ubuntu 有两种安装方式: 源码安装:官网(https://opencv.org/releases.html)下载源代码,在机器上 ...

  10. 剑指offer五十五之链表中环的入口结点

    一.题目 一个链表中包含环,请找出该链表的环的入口结点. 二.思路 方法一: 假设x为环前面的路程(黑色路程),a为环入口到相遇点的路程(蓝色路程,假设顺时针走), c为环的长度(蓝色+橙色路程). ...