利用原生Input实现web上传图片和视频

        在进行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);

                }

            }

        }

    }

}

如果觉得对你有用，请点下喜欢