vue项目中的h5图片上传（处理上传的时候图片被旋转的问题，并压缩图片大小）

vue的图片上传

这个页面实现的主要是实现创建球队功能，里面包含队徽，球队类型，球队名称，所属地址
这里除了图片上传还有一个地址的三级联动功能，这里我把这个页面都贴上来了。这个项目中使用vux作为ui库——本文主要是项目的纪录。
本项目除了图片的上传还有选取图片后图片被旋转的问题主要用到 exif-js 插件（可以使用npm安装 npm install exif-js --save ）具体方法可以查看其文档

**备注：这里是我们调用接口写的共用部分，每个人做项目肯定不一样。**var _this = this;var timeStamp = new Date().getTime();var randomKey = Math.random();var sign = getSign('1.0.0',timeStamp,randomKey,{},md5); this.axios({method: '这里是调用接口的方法',  // 比如get 、posturl: `这里存放其对类型接口地址`,headers: {'Content-Type': 'application/x-www-form-urlencoded',  // 请求类型'X-Request-AppType': 'public','X-Request-Id': 've.shareh5','X-Request-AppVersion': '1.0.0','X-Request-Time': timeStamp,'X-Request-Nonce': randomKey,'X-Request-Sign': sign,'X-Request-Token':localStorage.token  //项目中的token值}}).then(function (res) {})

图片上传js代码//获取图片文件
handleFile(e) {let files = e.target.files || e.dataTransfer.files;  if (!files.length) return;this.avator = e.target.files[0];this.imgPreview(this.avator);  },/*** 将以base64的图片url数据转换为Blob* @param urlData 图片base64数据* @name convertBase64UrlToBlob*/convertBase64UrlToBlob(urlData) {var bytes=window.atob(urlData.split(',')[1]);//处理异常,将ascii码小于0的转换为大于0var ab = new ArrayBuffer(bytes.length);var ia = new Uint8Array(ab);for (var i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i);}return new Blob( [ab] , {type : 'image/*'});},imgPreview(file){ //base64 格式let that = this;let Orientation;// //去获取拍照时的信息，解决拍出来的照片旋转问题 Exif.getData(file, function(){Orientation = Exif.getTag(this, 'Orientation');});// 看支持不支持FileReader  if (!file || !window.FileReader) return;if(/^image/.test(file.type)){// 创建一个reader  let reader = new FileReader();// 将上传的图片将转成 base64 格式  reader.readAsDataURL(file);// 读取成功后的回调reader.onload = function(e) {let img = new Image();img.src = this.result;//判断图片是否大于100K,是就直接上传，反之压缩图片  if (this.result.length <= (100 * 1024)) {  // that.$vux.toast.text("图片不能超过2M");that.avatorImg =this.result;}else {  img.onload = function () {  let data = that.compress(img,Orientation);that.avatorImg = data;}}}}},rotateImg (img, direction,canvas) {  //最小与最大旋转方向，图片旋转4次后回到原方向      const min_step = 0;      const max_step = 3;        if (img == null)return;      //img的高度和宽度不能在img元素隐藏后获取，否则会出错      let height = img.height;      let width = img.width;        let step = 2;      if (step == null) {      step = min_step;      }      if (direction == 'right') {      step++;      //旋转到原位置，即超过最大值      step > max_step && (step = min_step);      } else {      step--;      step < min_step && (step = max_step);      }       //旋转角度以弧度值为参数      let degree = step * 90 * Math.PI / 180;      let ctx = canvas.getContext('2d');      switch (step) {      case 0:      canvas.width = width;      canvas.height = height;      ctx.drawImage(img, 0, 0);      break;      case 1:      canvas.width = height;      canvas.height = width;      ctx.rotate(degree);      ctx.drawImage(img, 0, -height);      break;case 2:      canvas.width = width;      canvas.height = height;      ctx.rotate(degree);      ctx.drawImage(img, -width, -height);      break;case 3:      canvas.width = height;      canvas.height = width;      ctx.rotate(degree);      ctx.drawImage(img, -width, 0);      break;  }      },compress(img,Orientation) {  let canvas = document.createElement("canvas");  let ctx = canvas.getContext('2d');  //瓦片canvas  let tCanvas = document.createElement("canvas");  let tctx = tCanvas.getContext("2d");  let initSize = img.src.length;  let width = img.width;  let height = img.height;  //如果图片大于四百万像素，计算压缩比并将大小压至400万以下  let ratio;  if ((ratio = width * height / 4000000) > 1) {  // console.log("大于400万像素")  ratio = Math.sqrt(ratio);  width /= ratio;  height /= ratio;  } else {  ratio = 1;  }  canvas.width = width;  canvas.height = height;  //        铺底色  ctx.fillStyle = "#fff";  ctx.fillRect(0, 0, canvas.width, canvas.height);//如果图片像素大于100万则使用瓦片绘制  let count;  if ((count = width * height / 1000000) > 1) {  // console.log("超过100W像素");  count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片  //            计算每块瓦片的宽和高  let nw = ~~(width / count);let nh = ~~(height / count);tCanvas.width = nw;tCanvas.height = nh;for (let i = 0; i < count; i++) {for (let j = 0; j < count; j++) {tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);  ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);  }}} else {ctx.drawImage(img, 0, 0, width, height);}//修复ios上传图片的时候 被旋转的问题  if(Orientation != "" && Orientation != 1){switch(Orientation){  case 6://需要顺时针（向左）90度旋转this.rotateImg(img,'left',canvas);break;  case 8://需要逆时针（向右）90度旋转  this.rotateImg(img,'right',canvas);break;  case 3://需要180度旋转  this.rotateImg(img,'right',canvas);//转两次this.rotateImg(img,'right',canvas);  break;  }}//进行最小压缩  let ndata = canvas.toDataURL('image/jpeg', 0.1);  // let ndata = canvas;// console.log('压缩前：' + initSize);  // console.log('压缩后：' + ndata.length);  // console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");  tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;  return ndata;  },//触发图片输入框的点击实践setAvatar() {this.$refs.avatarInput.click();},

页面完整代码
<template><div id="team-create"><div class="app-header"><span class="iconfont icon-fanhui" @click="clickBack"></span><span class="title">新建球队</span></div><div class="team-create-mainBox"><!-- 球队上传 --><div class="upload"><div class="team-logo" @click.stop="setAvatar"> <input type="file" accept="image/*" @change="handleFile($event)" class="hiddenInput" ref="avatarInput"><img :src="avatorImg" alt="" :"defaultImg"></div><p>上传队徽</p></div><div class="team-create-info"><div class="teamType sameInputDiv"><group label-width="4.5em" label-margin-right="2em" label-align="right"><popup-picker title="球队类型" placeholder="选定后不可更改" :show-name="true" :data="list" v-model="sportsTypeId" value-text-align="left"></popup-picker></group><i class="iconfont icon-xiayibu"></i></div><div class="teamName inputdiv sameInputDiv"><label>球队名称</label><input type="text" placeholder="名称长度2-20个汉字" v-model="teamName" @blur="teamNameBlur" @focus="teamNameFocus"><span class="iconfont icon-shanchuwenben" v-if="isShowClear" @click="clearInputText"></span></div><div class="addressSelect inputdiv sameInputDiv" @click="choseAdd"><label>所属地区</label><div class="addressSelect-input"><input disabled="disabled" type="text" placeholder="请选择球队所属地区" v-model="teamAddress"><em></em></div><i class="iconfont icon-xiayibu"></i></div></div></div><p class="team-create-point"><i class="iconfont icon-tishi"></i>球队创建人可管理球队</p><button class="team-create-btn" @click="addTeam">创建球队</button><!-- 地址三级联动选项 start--><section class="address" :class="{toggHeight:istoggHeight}"><section class="title"><div class="cancle" @click="cancleAddress">取消</div><div class="determine" @click="determine()" v-if="isChooseAddressAll">确定</div></section><div class="address-box"><ul class="proJuli"><li class="addList" v-for="(item,index) in provinces" @click="chooseProvience(item, 1)" :key="index"  :class="{active : selected1 === item.id}"><span>{{item.name}}</span></li></ul><ul class="citJuli"><li class="addList" v-for="(item,index) in showCityList" @click="chooseProvience(item, 2)"  :key="index"  :class="{active : selected2 === item.id}"><span>{{item.name}}</span></li></ul><ul class="disJuli"><li class="addList" v-for="(item,index) in showDistrictList" @click="chooseQu(item)" :key="index" :class="{active : selected3 === item.id}"><span>{{item.name}}</span></li></ul></div></section><!-- 地址三级联动选项 end--><div class="layout" :class="{layoutBg:islayout}" @click="closeAdd()"></div><loading :show="isShowLoading" text=""></loading></div>
</template><script>
import { Group, XInput, PopupPicker ,Toast , Loading } from 'vux'
import qs from 'qs'
import md5 from 'md5-node'  //  这个是为了使用md5加密引入的
import Exif from 'exif-js'  //在移动端调用拍照功能时，会发生图片旋转，为了解决这个问题引入了exif去判断拍照时的信息再去处理图片  可以直接通过npm 安装这个插件export default{components: {Group,XInput,PopupPicker,Toast,Loading},data () {return {teamAddress : '', // 球队地址sportsTypeId: [], //球队类型数组list: [],avator: '', // 保存上传队徽的图片文件defaultImg: 'this.src="' + require('../../assets/img/uploadImg.jpg') + '"', avatorImg: '', //队徽图片teamName: '', // 球队名称createType: null, //进入创建球队的页面 1.选择参赛球队 2.我的球队showAddress: false,isShowClear: false, // 是否显示清除按钮islayout: false,istoggHeight: false,provinces: [],showCityList: [],showDistrictList: [],// 点击选中省市区selected1: null,selected2: null,selected3: null,// 点击省市区高亮名curProName: '',curCityName: '',curDistrictName: '',chooseProName: '',chooseCityName: '',chooseDistrictName: '',isChooseAddressAll: false, //地区选择确定按钮的显示,省市区全部选择后才会显示 isShowLoading: false,}},created() {this.chooseInit();var _this = this;var timeStamp = new Date().getTime();var randomKey = Math.random();var sign = getSign('1.0.0',timeStamp,randomKey,{},md5);// 球队类型接口this.axios({method: 'GET',url: `这里存放其对类型接口地址`,headers: {'Content-Type': 'application/x-www-form-urlencoded','X-Request-AppType': 'public','X-Request-Id': 've.shareh5','X-Request-AppVersion': '1.0.0','X-Request-Time': timeStamp,'X-Request-Nonce': randomKey,'X-Request-Sign': sign,'X-Request-Token':localStorage.token}}).then(function (res) {let sportsType =  [];let data = res.data.data;data.map(item => {const newObj={name: String(item.comment),value: String(item.val)}sportsType.push(newObj);})let newArr = [sportsType]_this.list = newArr;})},methods:{// 点击back按钮clickBack(){this.$router.go(-1)},chooseInit(){// 获取三级城市联动数据// 通过省份接口获取省份var _this = this;var timeStamp = new Date().getTime();var randomKey = Math.random();var sign = getSign('1.0.0',timeStamp,randomKey,{},md5);this.axios({method: 'GET',url: `通过省份接口获取省份`,headers: {'Content-Type': 'application/x-www-form-urlencoded','X-Request-AppType': 'public','X-Request-Id': 've.shareh5','X-Request-AppVersion': '1.0.0','X-Request-Time': timeStamp,'X-Request-Nonce': randomKey,'X-Request-Sign': sign,'X-Request-Token':localStorage.token}}).then(function (res) {_this.provinces = res.data.data;})},choseAdd: function () { // 选择地址弹层，打开弹层this.islayout = truethis.istoggHeight = true},closeAdd: function () { // 关闭弹层this.istoggHeight = falsethis.islayout = false},//球队输入框失去焦点事件teamNameBlur() {this.isShowClear = false},//球队输入框获取焦点事件teamNameFocus() {this.isShowClear = true;},// 清除input内容clearInputText () {this.teamName = ''if (this.teamName !== '') {this.isShowClear = true} else {this.isShowClear = false}},//获取图片文件handleFile(e) {let files = e.target.files || e.dataTransfer.files;  if (!files.length) return;this.avator = e.target.files[0];this.imgPreview(this.avator);  },/*** 将以base64的图片url数据转换为Blob* @param urlData 图片base64数据* @name convertBase64UrlToBlob*/convertBase64UrlToBlob(urlData) {var bytes=window.atob(urlData.split(',')[1]);//处理异常,将ascii码小于0的转换为大于0var ab = new ArrayBuffer(bytes.length);var ia = new Uint8Array(ab);for (var i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i);}return new Blob( [ab] , {type : 'image/*'});},imgPreview(file){let that = this;let Orientation;// //去获取拍照时的信息，解决拍出来的照片旋转问题 // console.log(file)Exif.getData(file, function(){Orientation = Exif.getTag(this, 'Orientation');});// 看支持不支持FileReader  if (!file || !window.FileReader) return;if(/^image/.test(file.type)){let reader = new FileReader();reader.readAsDataURL(file);// console.log(reader)reader.onload = function(e) {// console.log(e);let img = new Image();img.src = this.result;//图片不能超过2M// console.log("resultLen:"+this.result.length);if (this.result.length <= (100 * 1024)) {  // that.$vux.toast.text("图片不能超过2M");// return false;that.avatorImg =this.result;}else {  img.onload = function () {  let data = that.compress(img,Orientation);that.avatorImg = data;}}}}},rotateImg (img, direction,canvas) {  //最小与最大旋转方向，图片旋转4次后回到原方向      const min_step = 0;      const max_step = 3;        if (img == null)return;      //img的高度和宽度不能在img元素隐藏后获取，否则会出错      let height = img.height;      let width = img.width;        let step = 2;      if (step == null) {      step = min_step;      }      if (direction == 'right') {      step++;      //旋转到原位置，即超过最大值      step > max_step && (step = min_step);      } else {      step--;      step < min_step && (step = max_step);      }       //旋转角度以弧度值为参数      let degree = step * 90 * Math.PI / 180;      let ctx = canvas.getContext('2d');      switch (step) {      case 0:      canvas.width = width;      canvas.height = height;      ctx.drawImage(img, 0, 0);      break;      case 1:      canvas.width = height;      canvas.height = width;      ctx.rotate(degree);      ctx.drawImage(img, 0, -height);      break;case 2:      canvas.width = width;      canvas.height = height;      ctx.rotate(degree);      ctx.drawImage(img, -width, -height);      break;case 3:      canvas.width = height;      canvas.height = width;      ctx.rotate(degree);      ctx.drawImage(img, -width, 0);      break;  }      },//压缩图片compress(img,Orientation) {  let canvas = document.createElement("canvas");  let ctx = canvas.getContext('2d');  //瓦片canvas  let tCanvas = document.createElement("canvas");  let tctx = tCanvas.getContext("2d");  let initSize = img.src.length;  let width = img.width;  let height = img.height;  //如果图片大于四百万像素，计算压缩比并将大小压至400万以下  let ratio;  if ((ratio = width * height / 4000000) > 1) {  // console.log("大于400万像素")  ratio = Math.sqrt(ratio);  width /= ratio;  height /= ratio;  } else {  ratio = 1;  }  canvas.width = width;  canvas.height = height;  //        铺底色  ctx.fillStyle = "#fff";  ctx.fillRect(0, 0, canvas.width, canvas.height);  //如果图片像素大于100万则使用瓦片绘制  let count;  if ((count = width * height / 1000000) > 1) {  // console.log("超过100W像素");  count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片  //            计算每块瓦片的宽和高  let nw = ~~(width / count);let nh = ~~(height / count);tCanvas.width = nw;tCanvas.height = nh;for (let i = 0; i < count; i++) {for (let j = 0; j < count; j++) {tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);  ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);  }}} else {ctx.drawImage(img, 0, 0, width, height);}//修复ios上传图片的时候 被旋转的问题  if(Orientation != "" && Orientation != 1){switch(Orientation){  case 6://需要顺时针（向左）90度旋转this.rotateImg(img,'left',canvas);break;  case 8://需要逆时针（向右）90度旋转  this.rotateImg(img,'right',canvas);break;  case 3://需要180度旋转  this.rotateImg(img,'right',canvas);//转两次this.rotateImg(img,'right',canvas);  break;  }}//进行最小压缩  let ndata = canvas.toDataURL('image/jpeg', 0.1);  // let ndata = canvas;// console.log('压缩前：' + initSize);  // console.log('压缩后：' + ndata.length);  // console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");  tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;  return ndata;  },//触发图片输入框的点击setAvatar() {this.$refs.avatarInput.click();},// 获取省份函数，通过点击省份得到市，然后通过点击市获取县chooseProvience(item,type) {var _this = this;if(type === 1){if(item.id === _this.selected1){ //点击过后，再去点击已经点击过的省或者县达到拦截请求return false;}_this.selected1 = item.id;}else{if(item.id === _this.selected2){return false;}_this.selected2 = item.id}// _this.selected1 = type === 1 ? item.id;// 获取市县var timeStamp = new Date().getTime();var randomKey = Math.random();var sign = getSign('1.0.0',timeStamp,randomKey,{pid:item.id},md5);_this.axios({method: 'get',url: `获取市和区的接口`,headers: {'Content-Type': 'application/x-www-form-urlencoded','X-Request-AppType': 'public','X-Request-Id': 've.shareh5','X-Request-AppVersion': '1.0.0','X-Request-Time': timeStamp,'X-Request-Nonce': randomKey,'X-Request-Sign': sign,'X-Request-Token':localStorage.token},params:{pid:item.id}}).then(function (res) {if (type === 1) {// console.log(res.data)// 获取当前省 下的所有市_this.showCityList = '';_this.showDistrictList = '';_this.twoac = true;_this.twoshow = true;_this.selected2 = '';_this.selected3 = '';_this.showCityList = res.data.data;_this.isChooseAddressAll = false;// 获取选中的省_this.chooseProName = item.name;// console.log(_this.curProName);} else if (type === 2) {// 当前市下的所有区_this.showDistrictList = '';_this.selected3 = '';_this.threeshow = true;_this.threeac = true;_this.showDistrictList = res.data.data;_this.isChooseAddressAll = false;// 获取选中的市_this.chooseCityName = item.name}// console.log(res.data);})},// 获取所选区chooseQu(item){this.selected3 = item.idthis.chooseDistrictName = item.namethis.isChooseAddressAll =true;},// 地址弹窗确定按钮determine() {this.curProName = this.chooseProName ;this.curCityName = this.chooseCityName;this.curDistrictName = this.chooseDistrictName;// this.teamAddress = this.curProName +this. curCityName + this.curDistrictName;this.teamAddress = this. curCityName + this.curDistrictName;this.istoggHeight = false;this.islayout = false;this.isChooseAddressAll =false;},// 地址取消确定按钮cancleAddress() {this.istoggHeight = false;this.islayout = false;},// 验证球队类型validateTeamType () {if (this.sportsTypeId.length <= 0) {this.$vux.toast.text('球队类型不能为空');return false;}else{return true;}},// 验证球队类型validateLogo () {// console.log(this.sportsTypeId.length);if (this.avatorImg === '') {this.$vux.toast.text('请上传队徽');return false;}else{return true;}},// 验证名称，只能输入2-20个字validateTeamName () {if (this.teamName === '') {this.$vux.toast.text('球队名称不能为空');return false} else {// 测试修改后let flag = /^[\u4e00-\u9fa5\w-]{2,20}$/.test(this.teamName);if (!flag) {this.$vux.toast.text('请输入2-20个字的球队名称');return false;}else{return true;}}},// 验证地址validateTeamAddress () {if (this.teamAddress === '') {this.$vux.toast.text('请选择球队所属地区');return false} else {return true;}},// 创建球队按钮addTeam() {var _this = this;if(_this.validateLogo() && _this.validateTeamType() && _this.validateTeamName() && _this.validateTeamAddress() ){_this.isShowLoading = true;let param = new FormData(); //创建form对象// 为form添加参数param.append('logo',_this.convertBase64UrlToBlob(_this.avatorImg));param.append('name',_this.teamName);param.append('province',_this.curProName);param.append('sportType',_this.sportsTypeId[0]);param.append('city',_this.curCityName);param.append('district',_this.curDistrictName);var timeStamp = new Date().getTime();var randomKey = Math.random();var sign = getSign('1.0.0',timeStamp,randomKey,{},md5);// 创建球队接口_this.axios({method: 'post',url: `创建球队接口`, // 一般的也是上传接口data: param,headers: {'Content-Type': "multipart/form-data",'X-Request-AppType': 'public','X-Request-Id': 've.shareh5','X-Request-AppVersion': '1.0.0','X-Request-Time': timeStamp,'X-Request-Nonce': randomKey,'X-Request-Sign': sign,'X-Request-Token':localStorage.token}}).then(function (res) {if(res.data.status == 1){_this.isShowLoading = false;_this.$vux.toast.text("创建球队成功");}else{_this.$vux.toast.text("创建球队成功");_this.$router.go(-1)}}else{_this.isShowLoading = false;_this.$vux.toast.text(res.data.tip);}})}}}
}
</script><style lang="scss">
#team-create{background: #edf1f6;.app-header{.icon-fanhui{left: 0;padding: 0 0.12rem;}.icon-quxiao{left: 0;padding: 0 0.12rem;}}.team-create-mainBox{position: relative;background: #fff;.upload{padding-top: 0.36rem;height: 1.75rem;box-sizing: border-box;.team-logo{width: 0.75rem;height: 0.75rem;border-radius: 50%;margin: 0 auto;input{display: none;}img{display: block;width: 0.75rem;height: 0.75rem;border-radius: 50%;}// .icon-tianjiatouxiang{//   width: 0.75rem;//   height: 0.75rem;//   display: block;//   font-size: 0.75rem;//   color: #d3d3d3;//   border-radius: 50%;// }}p{margin-top: 0.1rem;font-size: 0.16rem;color: #011013;text-align: center;}}.team-create-info{.sameInputDiv{border-top: 1px solid #edf1f6;}.inputdiv{padding: 0 15px;height: 0.5rem;line-height: 0.5rem;position: relative;display: flex;label{display: block;width: 4.5em;text-align: left;margin-right: 2em;float: left;font-size: 0.14rem;color: #333333;}input{flex: 1;border: none;outline: none;line-height: 0.2rem;font-size: 0.14rem;color: #333333;background: none;opacity: 1;-webkit-text-fill-color:#333;-webkit-opacity:1; opacity: 1;}input::-webkit-input-placeholder{font-size: 0.14rem;color: #d3d3d3 !important;-webkit-text-fill-color:#d3d3d3;}input:-ms-input-placeholder{font-size: 0.14rem;color: #d3d3d3 !important;-webkit-text-fill-color:#d3d3d3;}input::-moz-placeholder{font-size: 0.14rem;color: #d3d3d3 !important;-webkit-text-fill-color:#d3d3d3;}&.teamName{span{position: absolute;right: 15px;display: block;line-height: 0.5rem;top: 0;color: #999999;font-size: 0.1rem;}}&.addressSelect{.addressSelect-input{flex: 1;position: relative;input{width: 100%;}em{display: block;height: 0.5rem;position: absolute;left: 0;top: 0;width: 100%;}}}}.inputdiv::after{content: " ";position: absolute;left: 0;bottom: 0;right: 0;height: 1px;color: #D9D9D9;-webkit-transform-origin: 0 100%;transform-origin: 0 100%;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}.teamType{position: relative;.vux-cell-value{color: #333 !important;}.weui-cells:before{border-top: none;}.weui-cells::after{border-bottom: none !important;}}i{position: absolute;right: 15px;display: block;line-height: 0.5rem;top: 0;color: #999999;font-size: 0.1rem;}.weui-cells{margin-top: 0;.weui-cell{padding: 0 15px !important;line-height: 0.5rem !important;line-height: 0.5rem !important;}.weui-label{text-align: left !important;font-size: 0.14rem;color: #333333;}.vux-popup-picker-placeholder{font-size: 0.14rem;color: #d3d3d3;}.vux-popup-picker-value{font-size: 0.14rem;color: #d3d3d3;}.weui-input{font-size: 0.14rem;color: #d3d3d3;}.weui-input::-webkit-input-placeholder{color: #d3d3d3;}.weui-cell{padding: 13px 15px;}.weui-cell::before{left: 0;}.vux-cell-box::before{left: 0;}.weui-cell__ft{display: none;}}}}.team-create-point{margin-top: 0.11rem;padding: 0 0.12rem 0 0.34rem;font-size: 0.12rem;color: #666666;line-height: 0.18rem;position: relative;.icon-tishi{font-size: 0.14rem;position: absolute;left: 0.12rem;color: #999999;}}.team-create-btn{display: block;width: 2rem;height: 0.4rem;line-height: 0.4rem;text-align: center;background: #0cb0eb;border:none;border-radius: 0.4rem;font-size: 0.16rem;color: #ffffff;margin: 1rem auto 0;padding: 0;bottom: 0.5rem;outline: none;}.address{position:absolute;bottom:0;left:0;z-index:121;background:#fff;width:100%;height: 0;overflow: hidden;transition: height .5s;&.toggHeight{height: 3.7rem;}.title{overflow: hidden;height: .52rem;border-bottom: .01rem solid #d3d3d3;.area{float: left;display:inline-block;font-size:0.16rem;height: .4rem;line-height:.4rem;margin-left:0.3rem;color:#262e31;margin-top: .1rem;max-width: calc(100% - 80%);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.cancle{float: left;height: .52rem;line-height: .52rem;color: #333333;margin-left: .3rem;font-size: .18rem;}.determine{float: right;height: .52rem;line-height: .52rem;margin-right: .3rem;color: #333;font-size: .18rem;}}.address-box{display: flex;flex-direction: row;height: calc(100% - .52rem);}.addList{margin-left: .22rem;font-size:0.16rem;line-height:0.4rem;color:#262e31;}ul{flex: 1;// width: 33.3333%;height: 100%;overflow:auto;// float: left;li{padding: 0 0.06rem;&.active{color:#0cb0eb;}}}}.layout{width:100%;height:100%;position:fixed;top:0;left:0;z-index:120;opacity: 0;transition: all .5s;background:rgb(53, 58, 60);visibility: hidden;&.layoutBg{opacity: .7; visibility: visible;}}
}
.vux-popup-header-right{color: #0cb0eb !important;
}
</style>

vue项目中的h5图片上传（处理上传的时候图片被旋转的问题，并压缩图片大小）相关推荐

vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码. 单纯的h5网页不涉及真机 demo链接前端同学可以加我一起交流一起进步案例描述:需求是生成条形码并且在vue项目中实现扫一扫功能 ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
Tinymce富文本编辑器在vue项目中的使用；引入第三方插件和上传视频、图片等
先放张效果图第一步:安装依赖 npm install tinymce@5.0.12 第二步:在项目中的public文件夹中新建tinymce文件夹(因为我的项目是脚手架创建的,所以公共文件夹是pub ...
vue项目中阻止浏览器返回上一页
vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页与 A页面来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...
vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
Vue项目中最简单的使用集成UEditor方式，含图片上传
Vue 3 项目参考这里前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热 ...
Vue项目中最简单的使用集成百度UEditor方式，含图片上传
前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热度.而不少公司和个人也仍然 ...
vue项目中实现头像上传的功能型组件
@vue项目中实现头像上传的功能型组件功能需求实现个人中心的头像上传功能: 1.用户未上传过头像,展示设定好的默认头像(区分男女) 2.支持格式png.jpg.jpeg 3.图片大小:小于等于2M ...
Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...

vue项目中的h5图片上传（处理上传的时候图片被旋转的问题，并压缩图片大小）

vue的图片上传

vue项目中的h5图片上传（处理上传的时候图片被旋转的问题，并压缩图片大小）相关推荐

最新文章

热门文章