上传到阿里云的图片需要blob,base64格式等

  • 1.本地大图(10KB以上)上传到阿里云
  • 2.本地小图(10kb以下)上传到阿里云
  • 使用el-upload上传
  • 使用input上传

本地相对路径小图转base64格式

  • 直接用require函数包裹,webpack自动将10kb以下图片转为base64格式

本地相对路径大图转base64格式

getBase64(imgUrl) {
            window.URL = window.URL || window.webkitURL;
            const xhr = new XMLHttpRequest();
            xhr.open("get", imgUrl, true);
            xhr.responseType = "blob";
            xhr.onload = () => {
              if (xhr.status == 200) {
                //得到一个blob对象
                const blob = xhr.response;
                const oFileReader = new FileReader();
                oFileReader.readAsDataURL(blob);
                oFileReader.onloadend = e => {
                  const base64Img = e.target.result;//base64编码\
                  this.modelSrc  =  this.dataURLtoBlob(base64Img )
                  this.ossPut()
                };
              }
            };
            xhr.send();
        },

base64格式转blob对象

dataURLtoBlob(dataurl) {
        	let arr = dataurl.split(',');
        	 //注意base64的最后面中括号和引号是不转译的
        	 let _arr = arr[1].substring(0,arr[1].length-2);
        	 let mime = arr[0].match(/:(.*?);/)[1],
        	  bstr =atob(_arr),
        	  n = bstr.length,
        	  u8arr = new Uint8Array(n);
        	 while (n--) {
        	  u8arr[n] = bstr.charCodeAt(n);
        	 }
        	 return new Blob([u8arr], {
        	  type: mime
        	 });
         },

使用input框上传图片转blob

@change="uploadImage" // 定义input上传时触发的change事件

uploadImage(e) {
            //上传图片
            let file = e.target.files[0];
            this.fileName = file.name;
            if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
                this.$message.warning('图片类型必须是jpeg,jpg,png');
                return false
            }
            let reader = new FileReader()
            reader.onload = (e) => {
                let data
                if (typeof e.target.result === 'object') {
                    // 把Array Buffer转化为blob 如果是base64不需要
                    data = window.URL.createObjectURL(new Blob([e.target.result]))
                } else {
                    data = e.target.result
                }
                this.option.img = data
            }
            reader.readAsArrayBuffer(file);
            this.updateDialog = true;
            this.$refs.uploadRefImg.value ='';
        },

使用el-upload组件上传

 uploadFileChanged(file,fileList) {
            const isLt5M = file.size / 1024 / 1024 < 5;
            const typeArr = ['image/jpg','image/jpeg','image/png','image/bmp']
            const validType = typeArr.includes(file.raw.type)
            if(!validType){
                this.$message.error('上传图片格式只能是JPG,PNG,JPEG,BMP!');
                fileList.pop();
                return false;
            }
            if (!isLt5M) {
                this.$message.error('上传文件大小不能超过 5MB!');
                fileList.pop();
                return false;
            }
            let imageUrl  = window.URL.createObjectURL(file.raw)||window.webkitURL.createObjectURL(file.raw)



 
        }

当你的才华还撑不起你的野心时,你就应该静下心学习.