使用vue进行移动端上传图

刺骨的言语ヽ痛彻心扉 2022-05-10 06:06 265阅读 0赞

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

html

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\#][https_blog.csdn.net_xiaogezl_article_details_70156500]

[https_blog.csdn.net_xiaogezl_article_details_70156500]: https://blog.csdn.net/xiaogezl/article/details/70156500#