使用vue进行移动端上传图

使用input[type=file]进行移动端图片上传。 

html

<div class="header">
                <img class="MeImg0" src="../assets/img/upload_pictures@2x.png" alt="">
                <input type="file" @change="uploadImg($event)" />
            </div>

js

uploadImg(e) {
            var tag = e.target;
            var fileList = tag.files;
            var _this = this;
            var reader = new FileReader();
            reader.readAsDataURL(fileList[0]);
            reader.onload = function() {
                var oReader = new FileReader();
                oReader.onload = function(e) {
                    var image = new Image();
                    image.src = e.target.result;
                    image.onload = function() {
                        var expectWidth = this.naturalWidth;
                        var expectHeight = this.naturalHeight;
                        if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
                            expectWidth = 800;
                            expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
                        } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
                            expectHeight = 1200;
                            expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
                        }

                        //canvas 绘制图片 
                        var canvas = document.createElement("canvas");
                        var ctx = canvas.getContext("2d");
                        canvas.width = expectWidth;
                        canvas.height = expectHeight;
                        ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
                        var base64 = null;
                        base64 = canvas.toDataURL("image/jpeg", 0.5);
                        if (fileList[0].size / 2097152 > 1) {
                            _this.imgScale(base64, 5)
                        }
                        else {
                            //ajax请求，通过formdata进行上传图片 
                            var formdata = new FormData();
                            var blob = _this.dataURItoBlob(base64);
                            formdata.append('file', blob, 'image.png');


                            // 这里发请求，进行图片上传
                        }
                    };
                };
                oReader.readAsDataURL(fileList[0]);
            }
        },
//缩放图片，防止图片宽高过大 
        imgScale(imgUrl, quality) {
            var img = new Image();
            var _this = this;
            var canvas = document.createElement('canvas');
            var cxt = canvas.getContext('2d');
            img.src = imgUrl;
            img.onload = function() {
                //缩放后图片的宽高
                var width = img.naturalWidth / quality;
                var height = img.naturalHeight / quality;
                canvas.width = width;
                canvas.height = height;
                cxt.drawImage(this, 0, 0, width, height);
                //ajax请求，通过formdata进行上传图片 
                var formdata = new FormData();
                var blob = dataURItoBlob(canvas.toDataURL('image/jpeg'));
                formdata.append('file', blob, 'image.png');


                 // 这里发请求，进行图片上传
            }
        },
// 创建一个Blob对象 用于将base64转化为formdata
        dataURItoBlob(base64Data) {
            var byteString;
            if (base64Data.split(',')[0].indexOf('base64') >= 0) {
                byteString = window.atob(base64Data.split(',')[1]);
            }
            else {
                byteString = unescape(base64Data.split(',')[1]);
            }
            var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];  //type
            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(byteString.length); //size
            var ia = new Uint8Array(ab);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }
            return new Blob([ab], { type: mimeString });
        }

以上方法解决了图片的上传和压缩，但是在ios手机上回出现图片旋转问题。可以参考下面这一篇文章。

https://blog.csdn.net/xiaogezl/article/details/70156500#