vue+axios实现移动端图片上传
在利用vue做一些H5页面时,或多或少会遇到有图片上传的操作,主要是运用html5里面的input[type=file]来实现,传递到后端的数据是以二进制的格式传递,所以上传图片的请求与普通的请求稍微有点差异,具体体现在传递数据的格式是FormData,FormData是一个构造函数,具体用法链接如下:
MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
其次,由于图片是以二进制方式上传,所以需要修改下请求头的Content-Type类型为“multipart/form-data”以支持二进制数据上传。
在具体有以下几部分的实现:
1、页面端,利用H5的input[type=file]表单,进行图片上传,accept属性可以设置接收文件的类型,具体有: .doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document
<input class="ele-hidden" type="file" accept="image/*" size="30"
ref="getPhoto" @change="uploadAvatar('getPhoto')">
2、选择图片确认后会触发元素change事件,在input对象中,存在file属性,file是一个数组,数组里面存储的上传文件的File对象,里面包含上传文件的大小(size)、类型(type)、更改时间(lastModifiedDate)等。具体文档可参考:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
读取图片信息可以借助FileReader,解析成浏览器识别的格式,以实现图片的预览,FileReader构造函数文档地址为:https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader,
实例代码主要是为了解决移动端上传图片过大而进行了压缩,压缩后的图片体积大概是压缩前的十分之一,还是很可观的。
uploadAvatar(node) {//图片上传
let $node = this.$refs[node];
let file = $node.files[0];//获取当前选择的照片
let formData = new FormData();
let _this = this;
if(!file) return;
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
let img = new Image();
img.onload = function () {
img.src = e.target.result;
let data = compress(img);
let blob = dataURItoBlob(data);
formData.append("photo", blob);
_this.submitModify(formData); //上传方法
}
};
}
图片解析和压缩方法:
export function compress(img) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let initSize = img.src.length;
let width = img.width;
let height = img.height;
canvas.width = width;
canvas.height = height;
// 铺底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, width, height); //进行最小压缩
let ndata = canvas.toDataURL("image/jpeg", 0.1);
return ndata;
} export function dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(",")[0].indexOf("base64") >= 0)
byteString = atob(base64Data.split(",")[1]);
else byteString = unescape(base64Data.split(",")[1]);
var mimeString = base64Data
.split(",")[0]
.split(":")[1]
.split(";")[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mimeString });
}
3、更改请求头content-type类型
this.$axios.defaults.headers.post['Content-Type'] = 'multipart/form-data;charset=UTF-8';
vue+axios实现移动端图片上传的更多相关文章
- vue开发:移动端图片上传
因为最近遇到个移动端上传头像的需求,上传到后台的数据是base64位,其中为了提高用户体验,把比较大的图片用canvas进行压缩之后再进行上传.在移动端调用拍照功能时,会发生图片旋转,为了解决这个问题 ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
- angularJS+Ionic移动端图片上传的解决办法
前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有 ...
- vue移动端图片上传压缩
上传压缩方法 import {api} from '../../api/api.js'; import axios from 'axios'; export function imgPreview ( ...
- Vue+axios+Node+express实现文件上传(用户头像上传)
Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="bac ...
- HTML5移动端图片上传模块
上传图片的功能是极为常用的,之前做过一个移动端上传文件的功能(基于jquery的),总结梳理一下. html <div class="uploadPic clearBox"& ...
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- vue quill使用&quill 自定义图片上传&自定义mp4 更换标签
pluins 创建quill 目录 创建文件video.js import { Quill } from 'vue-quill-editor' // 源码中是import直接倒入,这里要用Quill. ...
- vue“欺骗”ueditor,实现图片上传
一.环境介绍 @vue/cli 4.3.1 webpack 4.43.0 ueditor1.4.3.3 jsp版 二.springboot集成ueditor,实现分布式图片上传 参考我的另一篇博客,& ...
随机推荐
- python - 上下文管理协议(with + __enter__ + __exit__)
上下文管理协议: with + __enter__ + __exit__ #上下问管理协议: #with + __enter__ + __exit__ class Test(): def __init ...
- python读写文件字符集
操作I/O的能力是由操作系统的提供的,每一种编程语言都会把操作系统提供的低级C接口封装起来供开发者使用,Python也不例外. 读写文件是需要请求操作系统去操作磁盘的 所以默认的编码就是你平台的编 ...
- Sql Server 2008 数据库18456错误怎么解决?
可以windows连接,以前都可以,昨天突然就不可以用SQL连接,报18456错误. 1.以windows验证模式进入数据库管理器. 2.右击sa,选择属性: 在常规选项卡中,重新填写密码和确认密码( ...
- c++动态库封装及调用(3、windows下动态库调用)
1.DLL的隐式调用 隐式链接采用静态加载的方式,比较简单,需要.h..lib..dll三件套.新建“控制台应用程序”或“空项目”.配置如下: 项目->属性->配置属性->VC++ ...
- 【转】Linux中包管理与定时任务
[转]Linux中包管理与定时任务 第1章 软件查询 1.1 查询软件是否安装 rpm -qa |grep cron 查询是否安装了这个软件. [root@znix ~]# rpm -qa |grep ...
- Python 3.x 格式化输出字符串 % & format 笔记
Python 3.x 格式化输出字符串 % & format 笔记 python格式化字符串有%和{}两种 字符串格式控制符. 字符串输入数据格式类型(%格式操作符号) %%百分号标记 %c字 ...
- UML和模式应用5:细化阶段(6)---操作契约
1.前言 操作契约使用前置和后置条件,描述领域模型里对象的详细变化,作为系统操作的结果. 操作契约可以作为有用的OOA相关的制品. 操作契约可以视为UP用例模型的一部分,它是对用例之处的系统操作的效用 ...
- Linux系统无线网卡的安装【转】
转自:http://www.linuxidc.com/Linux/2013-03/81473.htm 现在的很多的可移动无线网卡都是usb接口的,把这种网卡应用到windows操作系统上是很容易就能起 ...
- echarts地图显示不正常问题
echarts2内置地图,而echarts3无内置地图,需要自己下载并导入. 在刚开始接触地图的时候,使用dreamweaver来构建页面,使用的编码不是UTF-8 代码是按照官方的拷贝下来的(我使用 ...
- GitHub上优秀的Go开源项目
近一年来,学习和研究Go语言,断断续续的收集了一些比较优秀的开源项目,这些项目都非常不错,可以供我们学习和研究Go用,从中可以学到很多关于Go的使用.技巧以及相关工具和方法.我把他们整理发出来,大家有 ...