一、选择拍照或文件

HTML:

使用<input>标签,

type设为"file"选择文件,

accept设为"image/*"选择文件为图片类型和相机拍摄,

设置multiple支持多选。

<div class="add-image">
<input class="file" type="file" accept="image/*" multiple @change="onFileChange">
<div class="add" >
<img src="../../assets/add/icon_addphoto.png" alt>
<p>添加照片</p>
</div>
</div>

样式:

设置opacity为0,使用自定义div覆盖于上面

.add-image{
width: 148px;
height: 148px;
position: relative;
.file{
position: absolute;
top:;
left:;
width: 148px;
height: 148px;
opacity:;
}

效果:

二、图片预览

VUE数据驱动更新前端所展示图片

两种方式:

1、使用本地URL(如果项目需要整理服务器图片地址作为表单提交,则本地URL不可以使用,操作删除不便)

URL.createObjectURL方法可创建一个本地的 URL 路径指向本地资源对象,下面使用该接口创建所选图片的地址并展示。

let url=window.URL.createObjectURL(file)
this.goods.goodsImageList.push(url)

2、使用服务器返回路径(缺点:如果上传失败就无法显示)

上传图片请求成功后,服务器返回一个url,使用该url进行字符串拼接,然后加入goods.goodsImageList数组。

三、图片旋转

通过相机拍摄的图片,由于拍摄时手持相机的方向问题,导致拍摄的图片可能存在旋转,需要进行纠正。纠正旋转需要知道图片的旋转信息,这里借助了一个叫 exif-js 的库,该库可以读取图片的 EXIF 元数据,其中包括拍摄时相机的方向,根据这个方向可以推算出图片的旋转信息。
下面是 EXIF 旋转标志位,总共有 8 种,但是通过相机拍摄时只能产生1、3、6、8 四种,分别对应相机正常、顺时针旋转180°、逆时针旋转90°、顺时针旋转90°时所拍摄的照片。

纠正图片旋转角度,只要读取图片的 EXIF 旋转标志位,判断旋转角度,在画布上对图片进行旋转后,重新导出新的图片即可。

/**
* 修正图片旋转角度问题
* @param {file} 原图片
* @return {Promise} resolved promise 返回纠正后的新图片
*/
function fixImageOrientation (file) {
return new Promise((resolve, reject) => {
// 获取图片
const img = new Image();
img.src = window.URL.createObjectURL(file);
img.onerror = () => resolve(file);
img.onload = () => {
// 获取图片元数据(EXIF 变量是引入的 exif-js 库暴露的全局变量)
EXIF.getData(img, function() {
// 获取图片旋转标志位
var orientation = EXIF.getTag(this, "Orientation");
// 根据旋转角度,在画布上对图片进行旋转
if (orientation === 3 || orientation === 6 || orientation === 8) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
switch (orientation) {
case 3: // 旋转180°
canvas.width = img.width;
canvas.height = img.height;
ctx.rotate((180 * Math.PI) / 180);
ctx.drawImage(img, -img.width, -img.height, img.width, img.height);
break;
case 6: // 旋转90°
canvas.width = img.height;
canvas.height = img.width;
ctx.rotate((90 * Math.PI) / 180);
ctx.drawImage(img, 0, -img.height, img.width, img.height);
break;
case 8: // 旋转-90°
canvas.width = img.height;
canvas.height = img.width;
ctx.rotate((-90 * Math.PI) / 180);
ctx.drawImage(img, -img.width, 0, img.width, img.height);
break;
}
// 返回新图片
canvas.toBlob(file => resolve(file), 'image/jpeg', 0.92)
} else {
return resolve(file);
}
});
};
});
}

四、图片压缩

现在手机拍照质量越来越高,拍出来的照片多达几M甚至十几M,直接上传原图不合理,容易上传失败,且后台对请求体大小有限制,后续加载图片展示也会变得慢,所以要求我们前端在上传之前进行图片的压缩。

下面函数实现了对图片的压缩,原理是在画布上绘制缩放后的图片,最终从画布导出压缩后的图片。方法中有两处可以对图片进行压缩控制:一处是控制图片的缩放比;另一处是控制导出图片的质量。

// 压缩图片
compressImage(file) {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = window.URL.createObjectURL(file);
img.onerror = error => reject(error);
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = Math.min(img.width, 200);//控制图片大小
const radio = canvas.width / img.width;
canvas.height = img.height * radio; //等比缩放
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
const quality = 0.8; //控制输出图片质量
canvas.toBlob(file => {
let files = new window.File([file], 'file.jpg', { type: file.type });
resolve(files);
}, 'image/jpeg', quality);
};
});
},

这里有个要注意的点,toBlob之后是一个Blob对象,但是请求要求传入file文件,所以我们要将blob对象转为file

    let files = new window.File([this.blob], file.name, {type: file.type})

五、图片上传

通过FormData创建表单数据,发起 ajax POST请求即可,下面函数实现了上传文件。

// 上传图片
uploadFile(file) {
return request({
method: 'post',
postType: 'file',
url: '//...域名.../upload/comments',
data: {
file: file
}
});
},
export function formData(obj) {
let formData = new FormData(); Object.keys(obj).forEach(key => {
let val = obj[key];
val = val == null ? '' : val;
if (typeof val === 'object') {
if (val instanceof window.File) {
formData.append(key, val);
} else {
formData.append(key, JSON.stringify(val));
}
} else {
formData.append(key, val);
}
});
return formData;
}
export function request(options) {
return new Promise((resolve, reject) => {
let {
method,
url,
data,
params,
headers = {},
withCredentials = false,
// file || ''
postType = ''
} = options; const xhr = new XMLHttpRequest();
let sendData = null;
method = (method || 'GET').toUpperCase(); const urlParse = /\?/.test(url) ? parseString(url) : {};
const querys = { timestamp: Math.round(new Date() / 1000), app_id: values.app_id, ...urlParse, ...params }; // 验签
let keys = Object.keys(querys);
keys.push('app_secret');
const api_sign = sha1(keys.sort().map(key => querys[key] || values[key]).join('')); // console.log('api_sign', api_sign); headers.api_sign = api_sign; url +=
(/\?/.test(url) ? '&' : '?') +
Object.keys(querys)
.map(key => `${key}=${escape(querys[key])}`)
.join('&'); xhr.open(method, url, true); // 处理sendData
// postType file
if (method === 'POST') {
if (postType === 'file') {
sendData = data ? formData(data) : null;
} else {
headers['Content-Type'] = headers['Content-Type'] || 'application/json;charset=UTF-8';
sendData = data ? JSON.stringify(data) : null;
}
} Object.keys(headers).forEach(key => {
xhr.setRequestHeader(key, headers[key]);
}); xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// options.success(xhr.responseText);
let response = {
status: xhr.status,
data: {}
};
try {
response.data = JSON.parse(xhr.responseText);
} catch (e) {
console.warn('request error:', e);
} if (response) {
resolve(response);
} else {
reject(new Error('cancel by response interceptor'));
}
}
};
xhr.onerror = reject; // withCredentials默认为true
xhr.withCredentials = withCredentials; // console.log(url, headers, sendData);
xhr.send(sendData);
});
}

六、合并上传

onFileChange(e) {
const files = Array.prototype.slice.call(e.target.files);
files.forEach(file => {
// 本地预览
// let url=window.URL.createObjectURL(file)
// this.photo.push(url)
this.compressImage(file)
.then(file => {
return this.uploadFile(file);
}).then(data => {
let goodsImage = data.data.data;
this.goods.goodsImageList.push(goodsImage);
console.log('上传成功');
// console.log(this.goods.goodsImageList);
}).catch(error => {
console.log('上传失败');
});
});
},

最终效果:

一文了解H5照片上传过程的更多相关文章

  1. ASP.Net中实现上传过程中将文本文件转换成PDF的方法

    iTextSharp是一个常用的PDF库,我们可以使用它来创建.修改PDF文件或对PDF文件进行一些其他额外的操作.本文讲述了如何在上传过程中将文本文件转换成PDF的方法. 基本工作 在开始之前,我们 ...

  2. 用C#缩小照片上传到各种空间

    中秋到了,首先祝各位猿友节日快乐!!! 本博文的原名称是“跟我一起用C#压缩照片上传到各种空间”,评论上有人开骂,没办法我这人就是自信霸气,但是既然有人提出来我还是改掉吧,如果文章写得不好的地方欢迎大 ...

  3. Iphone H5上传照片被旋转

    最近做项目发现在Iphone下,我们上传图片都会被翻转,最后查阅资料发现,的确是IOS的问题 不说过程,直接解决方法 iOS下,html方式使用<input type="file&qu ...

  4. Android实现批量照片上传至server,拍照或者从相冊选择

    近期因为项目需求,须要完毕批量照片上传,折腾了一段时间,最终完毕了,达到了例如以下效果 主界面主要有GridView组成和button组成,当按下一个格点时,会调用相机或者相冊,拍照或者选择相冊照片, ...

  5. android一个上传图片的样例,包含怎样终止上传过程,假设在上传的时候更新进度条(一)

    先上效果图: Layout为: <? xml version="1.0" encoding="utf-8"?> <LinearLayout x ...

  6. 高可用的Spring FTP上传下载工具类(已解决上传过程常见问题)

    前言 最近在项目中需要和ftp服务器进行交互,在网上找了一下关于ftp上传下载的工具类,大致有两种. 第一种是单例模式的类. 第二种是另外定义一个Service,直接通过Service来实现ftp的上 ...

  7. css实现照片上传的加号框

    css实现照片上传的加号框    

  8. ASP.NET CORE的H5上传

    做的CORE项目中用到H5上传,把以前的MVC代码复制过来得修改一下才能用在.NET CORE中

  9. 用H5上传文件

    //1,第一步读取用户选中的文件 <input type="file" accept="image/*" onchange = "selecte ...

随机推荐

  1. ZOJ 3471 【状态压缩DP】

    题意: 有n种化学物质,他们彼此反应会有一种消失并释放出能量. 给出矩阵,第i行j列代表i和j反应j消失释放的能量. 求最大释放多少能量. 思路: 状态压缩DP,我是这么想的. 利用二进制0代表该物质 ...

  2. Spring4MVC 请求参数映射和Content-type

    目录 前言 不使用注解(不传则为null) 基本数据类型和日期类型 自定义类型POJO @PathVariable注解 @RequestParam 注解 @RequestBody注解 复杂对象Arra ...

  3. Github配置SSH

    以前也配置过ssh,但是没有注意用法,在配置一次熟悉流程 检查本机是否有ssh key设置 $ cd ~/.ssh 或cd .ssh 如果没有则提示: No such file or director ...

  4. [Javascript] Link to Other Objects through the JavaScript Prototype Chain

    Objects have the ability to use data and methods that other objects contain, as long as it lives on ...

  5. 碰撞检測之Sphere-Box检測

    检測思路 首先要做的是将Box转为AABB,然后推断圆心是否在Box内.用的就是之前的SAT 假设圆心在Box内,肯定相交, 假设不在圆心内.则有四种情况,与顶点相交,与楞相交,与面相交,这里的确定也 ...

  6. HDU 5285 wyh2000 and pupil(dfs或种类并查集)

    wyh2000 and pupil Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Other ...

  7. python的序列化和反序列化以及json

    python 的序列化和反序列化用于内存之间的共享,包括服务器和客户端的共享,两个Python程序之间的共享,以及以字符串的形式存储到硬盘中. pyhton 的pickle 可以对Python的各种数 ...

  8. 快看Sample代码,速学Swift语言(2)-基础介绍 快看Sample代码,速学Swift语言(1)-语法速览

    快看Sample代码,速学Swift语言(2)-基础介绍 Swift语言是一个新的编程语言,用于iOS, macOS, watchOS, 和 tvOS的开发,不过Swift很多部分内容,我们可以从C或 ...

  9. Visual Studio 2012 Fakes框架测试驱动开发TDD教程

    一.前言 最近团队要尝试TDD(测试驱动开发)的实践,很多人习惯了先代码后测试的流程,对于TDD总心存恐惧,认为没有代码的情况下写测试代码时被架空了,没法写下来,其实,根据个人实践经验,TDD并不可怕 ...

  10. quick-cocos2d-x教程10:实现血条效果。

    血条是常见功能.能够通过一个血条背景和一个不断改变的血条宽度.来实现少血. 在MainScence.lua中,先改代码: function MainScene:ctor()     local bg ...