vue-cli 封装压缩图片上传返回图片地址方法 。 import引用

创建js文件，命名为uploadImg.js

1、封装好压缩图片

import Vue from 'vue';
//上传图片 自动压缩处理
//传入参数
//action：接口地址
//param：input获取的input File
//path：可选，图片上传目录需要后端配合
//reWidth，reHeight 压缩设置最大宽高
export function uploadImg(action,param,path,reWidth,reHeight){
    return new Promise((resolve, reject) => {
        var imgname =  param.name;
        var imgtype =  param.type;
        console.log(imgtype.split('/')[1])
        let reader = new FileReader();
        reader.readAsDataURL(param);
        reader.onloadend = function() {
        let base64 = reader.result; // base64就是图片的转换的结果 
        //开始压缩图片
        var Img = new Image();
        Img.src = base64; //赋值
        Img.onload = function(){
            var set_head = '';
            let w = this.naturalWidth,
                h = this.naturalHeight,
                resizeW = 0,
                resizeH = 0;
            //压缩设置
            let maxSize = {
                width:reWidth, //设置选项 宽度
                height:reHeight, // 设置选项 高度
                level:0.9   //图片保存质量
            };
            //计算压缩比例
            if(w > maxSize.width || h > maxSize.height){
                let multiple = Math.max(w / maxSize.width , h / maxSize.height);
                resizeW = w / multiple;
                resizeH = h / multiple; 
            }else{
                resizeW = w;
                resizeH = h;
            }
            let canvas = document.createElement("canvas"),
                ctx = canvas.getContext('2d');
            if(window.navigator.userAgent.indexOf('iphone') > 0){
                canvas.width = resizeH;
                canvas.height = resizeW;
                ctx.retate(90 * Math.PI / 180);
                ctx.drawImage(Img,0,-resizeH,resizeW,resizeH);
            }else{
                canvas.width = resizeW;
                canvas.height = resizeH;
                ctx.drawImage(Img,0,0,resizeW,resizeH);
            }
            set_head = canvas.toDataURL(imgtype,maxSize.level); //得到压缩完成的base64图片
            var arr = set_head.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);  
            while(n--){ 
                u8arr[n] = bstr.charCodeAt(n);  
            }
            var NewName = '123.'+imgtype.split('/')[1];
            var resize64 = new File([u8arr], NewName, {type:mime}); //得到formData
            var Newparam = new FormData(); 
            var names = imgname;  
            Newparam.append('imgFile', resize64, resize64.set_head);
            Newparam.append('message', names);
            Newparam.append('uploadPath', path);
            let config = {headers: {'Content-Type': 'multipart/form-data'}}; 
            Vue.prototype.$axios.post(action, Newparam, config).then(function(res) { 
                if(res.data.invokeResultCode == 200){ 
                    Vue.prototype.$message.success("上传成功");
                        resolve(res.data.data.imgUrl)  //如果上传成功返回图片地址 需要后端配合
                    }
                    else{
                        Vue.prototype.$message.error(res.data.invokeResultMessage);
                        reject('error');//如果错误返回错误
                    }
                }).catch((res) => {
                    Vue.prototype.$message.error('上传图片失败，请稍候重试或联系管理员');
                    reject('error'); //如果错误返回错误
                })
                
            }; 
        } 
    });
   
};

2、页面中引入方法

import {uploadImg}from '../../utils/uploadimg.js';

3、data中需要的定义

action:'',
param:'',
coinIconUrl:'',

4、在需要的地方引入方法（此处为ElementUI封装上传，拦截上传前，上传）

beforeupload(file) { //拦截图片上传 
    //判断图片是否符合规则，此处只能返回true 或者false
    this.param = file;
    const isJPG = file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 1;
    if (!isJPG) {this.$message.error('上传图片只能是 PNG 格式!');}
    else if (!isLt2M) {this.$message.error('上传图片大小不能超过 1MB!');}
    return isJPG && isLt2M;
},
httprequest() { //请求上传
    var path = 'coin';
//本文核心代码
    uploadImg(this.action,this.param,path,200,200).then(res => {
        console.log(res);
        this.coinIconUrl = res;
    },error => {console.log(error);});
//本文核心代码结束
},