在利用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实现移动端图片上传的更多相关文章

  1. vue开发:移动端图片上传

    因为最近遇到个移动端上传头像的需求,上传到后台的数据是base64位,其中为了提高用户体验,把比较大的图片用canvas进行压缩之后再进行上传.在移动端调用拍照功能时,会发生图片旋转,为了解决这个问题 ...

  2. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  3. angularJS+Ionic移动端图片上传的解决办法

    前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有 ...

  4. vue移动端图片上传压缩

    上传压缩方法 import {api} from '../../api/api.js'; import axios from 'axios'; export function imgPreview ( ...

  5. Vue+axios+Node+express实现文件上传(用户头像上传)

    Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="bac ...

  6. HTML5移动端图片上传模块

    上传图片的功能是极为常用的,之前做过一个移动端上传文件的功能(基于jquery的),总结梳理一下. html <div class="uploadPic clearBox"& ...

  7. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  8. vue quill使用&quill 自定义图片上传&自定义mp4 更换标签

    pluins 创建quill 目录 创建文件video.js import { Quill } from 'vue-quill-editor' // 源码中是import直接倒入,这里要用Quill. ...

  9. vue“欺骗”ueditor,实现图片上传

    一.环境介绍 @vue/cli 4.3.1 webpack 4.43.0 ueditor1.4.3.3 jsp版 二.springboot集成ueditor,实现分布式图片上传 参考我的另一篇博客,& ...

随机推荐

  1. python - 上下文管理协议(with + __enter__ + __exit__)

    上下文管理协议: with + __enter__ + __exit__ #上下问管理协议: #with + __enter__ + __exit__ class Test(): def __init ...

  2. python读写文件字符集

    操作I/O的能力是由操作系统的提供的,每一种编程语言都会把操作系统提供的低级C接口封装起来供开发者使用,Python也不例外.  读写文件是需要请求操作系统去操作磁盘的  所以默认的编码就是你平台的编 ...

  3. Sql Server 2008 数据库18456错误怎么解决?

    可以windows连接,以前都可以,昨天突然就不可以用SQL连接,报18456错误. 1.以windows验证模式进入数据库管理器. 2.右击sa,选择属性: 在常规选项卡中,重新填写密码和确认密码( ...

  4. c++动态库封装及调用(3、windows下动态库调用)

    1.DLL的隐式调用 隐式链接采用静态加载的方式,比较简单,需要.h..lib..dll三件套.新建“控制台应用程序”或“空项目”.配置如下: 项目->属性->配置属性->VC++ ...

  5. 【转】Linux中包管理与定时任务

    [转]Linux中包管理与定时任务 第1章 软件查询 1.1 查询软件是否安装 rpm -qa |grep cron 查询是否安装了这个软件. [root@znix ~]# rpm -qa |grep ...

  6. Python 3.x 格式化输出字符串 % & format 笔记

    Python 3.x 格式化输出字符串 % & format 笔记 python格式化字符串有%和{}两种 字符串格式控制符. 字符串输入数据格式类型(%格式操作符号) %%百分号标记 %c字 ...

  7. UML和模式应用5:细化阶段(6)---操作契约

    1.前言 操作契约使用前置和后置条件,描述领域模型里对象的详细变化,作为系统操作的结果. 操作契约可以作为有用的OOA相关的制品. 操作契约可以视为UP用例模型的一部分,它是对用例之处的系统操作的效用 ...

  8. Linux系统无线网卡的安装【转】

    转自:http://www.linuxidc.com/Linux/2013-03/81473.htm 现在的很多的可移动无线网卡都是usb接口的,把这种网卡应用到windows操作系统上是很容易就能起 ...

  9. echarts地图显示不正常问题

    echarts2内置地图,而echarts3无内置地图,需要自己下载并导入. 在刚开始接触地图的时候,使用dreamweaver来构建页面,使用的编码不是UTF-8 代码是按照官方的拷贝下来的(我使用 ...

  10. GitHub上优秀的Go开源项目

    近一年来,学习和研究Go语言,断断续续的收集了一些比较优秀的开源项目,这些项目都非常不错,可以供我们学习和研究Go用,从中可以学到很多关于Go的使用.技巧以及相关工具和方法.我把他们整理发出来,大家有 ...