封装一个简易的上传附件方法

栏目: Html5 · 发布时间: 6年前

内容简介:之前做项目,总能碰到上传附件的需求,不管是web端,还是移动端;当然,网上有很多第三方的插件,比如基于vue的element-ui的上传附件,但用第三方的插件修改起来很费事,层层包裹;所以自己封装了一个上传附件的方法,自己写的方法,用和修改起来是很爽的,哈哈通过vue绑定change事件

之前做项目,总能碰到上传附件的需求,不管是web端,还是移动端;当然,网上有很多第三方的插件,比如基于vue的element-ui的上传附件,但用第三方的插件修改起来很费事,层层包裹;所以自己封装了一个上传附件的方法,自己写的方法,用和修改起来是很爽的,哈哈

GitHub地址

github.com/lirongrong/…

演示

封装一个简易的上传附件方法

功能

  1. 上传附件分为图片和非图片两种格式
  2. 上传的附件会被编译成base64位格式
  3. 对上传的图片进行压缩处理

HTML

通过vue绑定change事件

<input type="file" multiple="multiple" v-on:change="chooseImage" placeholder="上传图片" />
复制代码

JS

下面的大家应该都知道:chooseImage能获取到上传的附件信息

chooseImage(e){
    var files = e.target.files;
}
复制代码

遍历files,判断上传附件的大小格式等

var defaults = {
    folder: "default",
    size: 3,
    type: ['image', 'word', 'pdf', 'zip', 'rar', 'sheet', 'text','log','psd'],
    maxWidth: Number, //最大宽度
    maxHeight: Number, //最大高度
    success: false,
    beforeSend: false,
};
for (var i = 0; i < files.length; i++) {
    var file = files[i]; 
    //附件大于3M,被禁止
    if (file.size > defaults.size * 1024 * 1024) {
        that.showToast("文件【" + file.name + "】大于" + defaults.size + "M!");
        return;
    }
    //不在上传格式范围内的,被禁止
    var valiType = false;
    for (var i = 0; i < defaults.type.length; i++) {
       var item = defaults.type[i];
       if (file.type.indexOf(item) >= 0) {
           valiType = true;
           break;
       }
    }
    if (!valiType) {
       that.showToast("上传文件类型不正确!");
       return;
    } 
    ...
}
复制代码

接着用到了HTML5的FileReader方法:

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

接着上面for循环里三个...的地方继续写,这里需要住的地方是:

上传的附件分为图片和非图片的类型,这样分的目的是,上传图片的时候会压缩图片,以防图片太宽或太高占用服务器空间

var reader = new FileReader(); 
var type = file.type.split('/')[0];
reader.readAsDataURL(file);
reader.onloadstart = function () {
    //用以在上传前加入一些事件或效果,如载入中...的动画效果
    that.loading = 'loading';
};
reader.onloadend = function(){
    //删除加载效果
    that.loading = '';
    //当附件格式不是图片的时候
    if(type != 'image')
        that.model.fileList.push(file);
    //当附件格式为图片的时候
    var dataURL = this.result;  
    var imaged = new Image();
    imaged.src = dataURL;
    imaged.onload = function () {
        var img = this; 
        //利用canvas对图片进行压缩
        var getImg = that.getBase64Image(img,{
            maxWidth:1000,
            maxHeight:1000
        });
        that.model.imgList.push({
            src:getImg.dataURL
        }) 
    };   
} 
复制代码

所有的附件都在data model中,下面是页面的绑定

<!--上传除图片外的其他附件-->
<ul>
    <li class="flex flex_align_center" style="padding:6px 0;" v-for="(item,index) in model.fileList" :key="index">
        <span class="flex_item">{{item.name}}</span>
        <a title="删除" class="ml10" @click="deleteFile(index)">删除</a> 
    </li>
</ul> 
<!--上传图片--> 
<ul id="preview" class="flex flex_wrap">
    <li v-for="(item,index) in model.imgList" :key="index" style="flex-basis: 20%;" class="pr">
        <img :src="item.src" alt=""/>
        <i class="iconfont icon-shanchu pa" @click="deleteImg(index)"></i>
    </li>
</ul> 
<div>{{loading}}</div>
复制代码

大家可能注意到了压缩图片的getBase64Image方法,这是我自己封装的一个方法,通过定义最大宽度和最大高度来等比压缩图片,不要担心图片会变形,用到canvas来压缩图片,下面是封装的方法

细心的朋友也许会发现:演示图片最后我上传的图片像素为3543 * 5315,上传之后图片大小等比压缩成667 * 1000,因为最大宽度和最大高度我设置的是1000,所以相对应宽高会等比缩小

/**
 * 图片文件转base64
 */
getBase64Image:function(img,options){
    var defaults = {
        maxWidth : Number,
        maxHeight : Number
    };
    if(options != undefined && options != null){
        defaults = $.extend(defaults,options)
    };
    // 缩放图片需要的canvas
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    // 图片原始尺寸
    var originWidth = img.width;
    var originHeight = img.height;
    // 最大尺寸限制,可通过国设置宽高来实现图片压缩程度
    var maxWidth = defaults.maxWidth,
        maxHeight = defaults.maxHeight;
    // 目标尺寸
    var targetWidth = originWidth,
        targetHeight = originHeight;
    // 图片尺寸超过400x400的限制
    if(originWidth > maxWidth || originHeight > maxHeight) {
        if(originWidth / originHeight > maxWidth / maxHeight) {
            // 更宽,按照宽度限定尺寸
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
        } else {
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
        }
    }
    // canvas对图片进行缩放
    canvas.width = targetWidth;
    canvas.height = targetHeight;
    // 清除画布
    context.clearRect(0, 0, targetWidth, targetHeight);  
    // 图片压缩
    context.drawImage(img, 0, 0, targetWidth, targetHeight);  
    /*第一个参数是创建的img对象;第二个参数是左上角坐标,后面两个是画布区域宽高*/
    //压缩后的图片base64 url
    /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/jpeg';
        * qualityArgument表示导出的图片质量,只要导出为jpg和webp格式的时候此参数才有效果,默认值是0.92*/
    dataURL = canvas.toDataURL('image/jpeg');
    //回调函数用以向数据库提交数据
    var base64 = dataURL.substr(dataURL.indexOf(",") + 1);
    return {dataURL,base64};
},
复制代码

额外再补充一个提示方法

/**
 * 提示信息
 */
showToast : function (msg) {
    var objToast = "<div class='rr_toast'>" + msg + "</div>"
    $(document.body).append(objToast);
    setTimeout(function () {
        $('.rr_toast').remove();
    }, 1000)
}
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

人月神话(40周年中文纪念版)

人月神话(40周年中文纪念版)

(美) 布鲁克斯(Brooks, F. P.) 著 / UML China翻译组,汪颖 译 / 清华大学出版社 / 2015-4-1 / 68.00元

在软件领域,很少能有像《人月神话》一样具有深远影响力和畅销不衰的著作。Brooks博士为人们管理复杂项目提供了最具洞察力的见解,既有很多发人深省的观点,又有大量软件工程的实践。本书内容来自Brooks博士在IBM公司SYSTEM/360家族和OS/360中的项目管理经验,该项目堪称软件开发项目管理的典范。该书英文原版一经面世,即引起业内人士的强烈反响,后又译为德、法、日、俄、中、韩等多种文字,全球......一起来看看 《人月神话(40周年中文纪念版)》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具