关于html5 上传的一点总结

开课第一周因为要写关于课程相关的文章，但是最近多个f项目中经常涉及到上传功能，所以先决定对上传做下总结。

先贴上之前针对js异步编程的文章：https://blog.csdn.net/weixin_36852235/article/details/80304440

之前做过两次这个图片上传了，第二次的时候按照领导的要求封装了一下。当时还是考虑少了点，没能完全满足现在的需求（所有的东西都是这么一步一步完善的吧）。

之前使用的是Plupload上传框架，.

具体参数配置可以参考http://www.phpin.net/tools/plupload/这个文档。

demo实例参考：http://chaping.github.io/plupload/demo/

 用别人的框架有很多局限性，而且要研究很久，稍微碰到一点坑，都要爬好久。因为现在大部分做的是移动端的东西，所以决定还是先看下html5原生的上传功能。至于pluload使用心得，有机会的话我再把重点拎出来。（经过这两次的迭代，差不多都能搞定了。。）

file对象

 1.首先定义type=file

 <div class="bf pl1_2 pr1_2 pt2_4 pb2_4 mt_5 clearfix">
                <div class="upload-item item-certify">
                    <p class="f15 pb1 ">打款凭证{{mydata['type203']}}sdfdf</p>
                    <div id="filesList0" class="setpic">
                            <div ng-show="mydata['type203'].length">
                                    <div class="upload-inner bgcolor09 text-center"  ng-repeat = "data in mydata['type203'] track by data.userId | ngRepeatFilter : mydata['type203'].length"  asset-imgshow-directive >
                                        <div class="del text-center"  ng-click="imgDel({{data.id}},203,{{data.userId}})" ><span class="signed_ico del_ico"></span></div>
                                        <img  ng-click="uploadImgshow('{{rootimgURL}}images/signed/card_fornt.png{{vnumStr}}')" ng-src="{{rootimgURL}}images/signed/card_fornt.png{{vnumStr}}" ></div>
                            </div>
                    </div>
                    <div ng-show="mydata['type203'].length " class="upload-inner text-center pr">
                        <img  class="pa left_pos" src="{{rootimgURL}}images/signed/certificate_ico.png{{vnumStr}}" alt="上传按钮">
                        <input type="file"  class="pa left_pos filebtn" style="opacity: 0;" 
                        οnchange='angular.element(this).scope().uploadFile(this)'
                        sign-upload-directive 
                        upload-config='{"url":"/html/upload/file/{{mydata.id}}/203/version/1.0","maxSize":"5M","type":"203"}' />
                    </div>
                </div>
        </div>

tips：使用trackby的时候要注意⚠️，要保持唯一性，尽量不要用$index,动态删除数组对象的时候会有问题，它会保留之前的数据。

 directive:

2.Filereader对象

filereader api参考地址readAsDataURL() 方法。//将文件读取为base64的格式，也就是可以当成图片的srcresult 属性 //将读取的数据保存在result里。progress 事件 //定时触发，来获取当前已上传文件的大小，如进度条loade 事件 //文件上传完成时触发loadend 事件 //文件上传完成时（不管成功、失败）触发

var uploadMethod = {
                    //  转换页面上的config对象
                    getJSON :function(config) {
                        var _temAttrs = {};
                        try {
                            _temAttrs = config ? JSON.parse(config) : null;
                            return _temAttrs;
                        } catch(e) {
                            console.log("%c " + e + "config is error!", "color:red");
                        }
            
                    },
                    // 检查要图片大小
                    checkImgSize:function(file,imgSrc) {
                        var curSize = file.size / 1024 / 1024;
                        if (curSize > parseFloat(config.maxSize)) {
                        alert("图片最大尺寸不得超过"+config.maxSize)
                        // this.$notice.setNotice(true, `图片最大尺寸不得超过${this.maxSize}`);
                          return;
                        } else if (curSize > 1) {
                          this.compressImg(file, function(imgSrc) {
                          this.sendFile(true,imgSrc);
                          });
                        } else {
                          this.sendFile(true,imgSrc);
                        }
                      },
                     //   上传图片
                      sendFile:function(init, imgUrl) {
                        var _this = this
                   
                        // 发送ajax
                        console.log("发送ajax");
                        //  imgurl.replace(/data:image\/(png||jpg||jpeg);base64,/, '')
                        scope.$apply(function(){
                            scope.mydata["type"+config.type].push({id:'20aa125',userId:"54659",docType:"203",img:"http://10.12.8.195:8092/images/home/jh_2-fd7b7f5ec9.png"})

                            console.log(scope.mydata)
                        })
                       

                      },
                    //  图片压缩
                      compressImg:function(fileobj,next) {
                        var _this = this
                        var url = URL.createObjectURL(fileobj)
                        var image = new Image();
                        image.src = url;var uploadM
//压缩方法的调用以及图片src赋值必须放在图片的 onload 方法里面。因为只有等图片加载完成后才能进行压缩处理，从而转换为base64 进行赋值。 
//如果放在 onload 方法外面，则可能压缩代码无效，或者会生成一张纯黑色的图片。

                        image.onload = function() {
                          var canvas, ctx, img64,width,height;
                          var expectWidth = this.width
                          var expectHeight = this.height
                  
                          if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 1100) {
                            expectWidth = 1100
                            expectHeight = expectWidth * this.naturalHeight / this.naturalWidth
                          } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1100) {
                            expectHeight = 1100
                            expectWidth = expectHeight * this.naturalWidth / this.naturalHeight
                          }
                          width = parseInt(expectWidth)
                          height = parseInt(expectHeight)
                          canvas = document.createElement("canvas")
                          canvas.width = width;
                          canvas.height = height;
                          ctx = canvas.getContext("2d");
                          ctx.drawImage(this, 0, 0, width, height)
                          img64 = canvas.toDataURL("image/jpeg", 0.75)
                          next && next(img64)  
                        };
                     
                    }
                 }
                 
                  var config = uploadMethod.getJSON(attrs.uploadConfig)
/*****************************type=file  change入口*********************************************************/
                  scope.uploadFile = function(e){
                       
var file = e.files[0] // angular 获取file对象写法
// 正常通过 e.target获取file 对象var file = e.target.files[0];//获取File对象，这里是上传单张图片，[0]代表第一张图片。
如果多张，就是一个var file = e.target.files;
var reader = new FileReader(); 

// 新建FileReader对象 

reader.readAsDataURL(file); // 读取为base64 

 // check img type 

if (file && !/(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(file.type)) { 

this.$notice.setNotice(true, "格式有误，仅支持jpg、png格式的图片"); return; } 

 // 不能上传同一张照片

 // document.getElementById("addBtn").value = ''

 reader.onload = function(e) { 

 // _this.loadingShow = true; console.log("e.target",e.target) 

 uploadMethod.checkImgSize(file,e.target.result); }; } }

以上就是完整的流程了，其实真的是很简单对吧。不能只在心里觉得困难，其实不然，当你动手的时候，它就解决一半了，千万不要害怕。思虑过甚，只会浪费时间。

下次准备用node 写下服务端接受文件。