内容简介:之前做项目,总能碰到上传附件的需求,不管是web端,还是移动端;当然,网上有很多第三方的插件,比如基于vue的element-ui的上传附件,但用第三方的插件修改起来很费事,层层包裹;所以自己封装了一个上传附件的方法,自己写的方法,用和修改起来是很爽的,哈哈通过vue绑定change事件
之前做项目,总能碰到上传附件的需求,不管是web端,还是移动端;当然,网上有很多第三方的插件,比如基于vue的element-ui的上传附件,但用第三方的插件修改起来很费事,层层包裹;所以自己封装了一个上传附件的方法,自己写的方法,用和修改起来是很爽的,哈哈
GitHub地址
演示
功能
- 上传附件分为图片和非图片两种格式
- 上传的附件会被编译成base64位格式
- 对上传的图片进行压缩处理
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) } 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JavaScript & jQuery交互式Web前端开发
[美]达克特(Duckett,J.) / 杜伟、柴晓伟、涂曙光 / 清华大学出版社 / 2015-6-9 / 79.80元
欢迎选择一种更高效的学习JavaScript和jQuery的方式。 你是一名JavaScript新手?或是您曾经向自己的Web页面上添加过一些脚本,但想以一种更好的方式来实现它们?本书非常适合您。本书不仅向您展示如何阅读和编写JavaScript代码,同时还会以一种简单且视觉化的方式,教您有关计算机编程的基础知识。阅读本书之前,您只需要对HTML和CSS有一些了解即可。 通过将编程理论......一起来看看 《JavaScript & jQuery交互式Web前端开发》 这本书的介绍吧!