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,实现分布式图片上传 参考我的另一篇博客,& ...
随机推荐
- Django学习手册 - 登录装饰器
# 装饰器定义 def auth(func): def inner(request,*args,**kwargs): v = request.COOKIES.get("user") ...
- 文件打包(.zip)并返回打压缩包存放路径
1.由于公司需要将一个或多个视频进行打包,格式如下图: 2.创建zipUtil工具包: package com.seegot.util; import java.io.BufferedOutputSt ...
- MR架构
MapReduce框架结构 Map/Reduce是一个用于大规模数据处理的分布式计算模型,它最初是由Google工程师设计并实现的,Google已经将它完整的MapReduce论文公开发布了.其中对它 ...
- 【转】Python之数据序列化(json、pickle、shelve)
[转]Python之数据序列化(json.pickle.shelve) 本节内容 前言 json模块 pickle模块 shelve模块 总结 一.前言 1. 现实需求 每种编程语言都有各自的数据类型 ...
- python 读取文件时报错UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position 205: illegal multib
python 读取文件时报错UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position 205: illegal multib ...
- 如何将SVN仓库转换为Git仓库
按如下步骤操作就可以将SVN仓库完整的转换为Git仓库: 1) 将远程SVN仓库搬到本地(这一步主要是为了提高转换的速度,也可以忽略) 参考这篇文章: http://rongjih.blog. ...
- 网络抓包 Fiddler
1. Fiddler 抓包简介 Fiddler是通过改写HTTP代理,让数据从它那通过,来监控并且截取到数据.当然Fiddler很屌,在打开它的那一瞬间,它就已经设置好了浏览器的代理了.当你关闭的时候 ...
- linux下快速安装jenkins
Linux下快速安装Jenkins 建议使用 FileZilla 工具简化以下步骤中移动.环境变量配置等步骤. 1 软件下载 l Java:jdk-7u17-linux-x64.tar.g ...
- SonarQube代码质量管理工具的升级(sonarqube6.2 + sonar-scanner-2.8 + MySQL5.6+)
SonarQube升级注意事项 0. 前提条件 如果之前是使用sonarqube5.2 + sonar-runner-2.4 +MySQL5.5版本或者类似的组合. 安装方法请参照SonarQube代 ...
- centos7忘记登录密码修改
很多时候我们都会忘记Linux root 用户的口令,下面就教大家如果忘记root口令怎么办 第1步:开机后在内核上按“e”.截图如下 按e以后会进入内核启动页面,如下图 第2步:在linux16这行 ...