在进行webapp开发中经常会遇到上传图片和视频的问题，我们如何在不借助第三方插件的情况下用原生input进行上传实现需求呢，让我们一起来学习下。
实现原理
利用原生input检查onchang事件，拿到文件对象，将文件转成Base64(此时我们可以直接将base64提交给服务端完成上传)。然后再把base64转成数据流，以数据流方式传递给服务端。下面演示的是在Angular2中上传方式的实现。
HTML
<input type="file" (change)="addFile($event)">
TS
addFile(e) {
let loading = this.loadingCtrl.create({
content: '正在上传...'
});
let file = e.target.files[0];
this.imageService.dealImage(file, (resule) => {
if (resule) {
loading.present();
let body = {
file: this.imageService.getFormData(this.imageService.dataURLtoBlob(resule)),
mediaName: file.name,
tableName: this._tableName,
dataId: this._dataId
};
将数据提交给服务端
this.fundService.addImage(body).then(data => {
this.getMedisList();
loading.dismiss();
});
}
});
}
imageService
import { Injectable } from "@angular/core";
@Injectable()
export class ImageService {
constructor() {
}
dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
getFormData(blob) {
var formData = new FormData();
formData.append("file", blob);
return formData;
}
dealImage(file: any, callback: any) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function () {
let result = this.result;
if (this.result.length <= (2000 * 1024)) {
callback(this.result);
} else {
let img = new Image();
img.src = result;
img.onload = function () {
//默认按比例压缩
let w = img.width;
let h = img.height;
var quality = 0.3; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, 0, 0, w, h);
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
}
}
}
}
}
如果觉得对你有用，请点下喜欢
