顺企网赣州网站建设,怎么更改网站域名解析,正能量网站免费进入无需下载,买网站主机需求#xff1a;上传图片之前按比例缩小图片分辨率#xff0c;宽高不超过1920不处理图片#xff0c;宽高超过1920则缩小图片分辨率#xff0c;如果是一张图片请参考这篇博客#xff1a;js实现图片压缩、分辨率等比例缩放 我根据这篇博主的分享#xff0c;写下了我的循环上…需求上传图片之前按比例缩小图片分辨率宽高不超过1920不处理图片宽高超过1920则缩小图片分辨率如果是一张图片请参考这篇博客js实现图片压缩、分辨率等比例缩放 我根据这篇博主的分享写下了我的循环上传的分辨率等比缩小 功能点击号新增一项点击- 号 删除一项 :auto-uploadfalse 使用elementUI组件不能使他自动上传主要功能是上传最左边的图片 el-form refform :modelform label-width120pxel-form-item label资源列表div classziyuan flex v-for(item, indexes) in addList :keyitem.idxxxdiv stylemargin-top: 9px;//图片(主要功能在这里)el-upload :actiondomins /common/upload:class{ disabled: item.uploadDisabled } list-typepicture-card:auto-uploadfalse:on-removehandleRemove.bind(null, { index: indexes, data: item }):on-changehandleChange.bind(null, { index: indexes, data: item }):file-listitem.fileList acceptimage/png, image/jpegi classel-icon-plus/i/el-uploadel-dialog :visible.syncdialogVisibleimg width100% :srcitem.dialogImageUrl alt/el-dialog/divdiv classyasuo flexcross:centerdivdiv styleheight: 68px;//压缩包el-upload refuploadzip :actiondomins /common/upload:before-uploadbeforeUploadZip :on-removehandleRemoveZip:on-successhandleAvatarSuccessZip.bind(null, { index: indexes, data: item }):file-listitem.fileListZip :auto-uploadtrue accept.zip ,.mp4:limit1el-button sizesmall typeprimary选择资源包/el-button/el-upload/div/div/divdiv classairadioel-radio-group v-modelitem.way el-radio :label0Android/el-radioel-radio :label1ios/el-radioel-radio :label2视频/el-radio/el-radio-group/divdiv stylemargin-top: 11px;// i classel-icon-circle-plus-outline stylecolor: #264E71;clickplusOne(indexes)/i// i classel-icon-remove-outline stylecolor: #264E71; v-showaddList.length 1clickremoveOne(indexes, item.id, item)/i/div/div/el-form-item/el-form代码
script
// 等比例缩小图片
function imageScale(width, originWidth, originHeight) {const scaleRatio width / originWidth;const scaleHeight scaleRatio * originHeight;return [width, scaleHeight];
}export default {components: { },data() {return {form: {},addList: [{id: 0,uploadDisabled: false,album: ,zip: ,way: 0,idxxx: 0}],}},methods:{handleRemove(obj, file, fileList) {let index obj.index;this.addList[index].uploadDisabled falsethis.$forceUpdate()},// 处理图片compress(file, scaleWidth, quality 0.5) {return new Promise((resolve, reject) {const reader new FileReader();console.log(file, file----);reader.readAsDataURL(file.raw);reader.onload (e) {let img new Image();img.src e.target.result;img.onload function () {// 等比例缩放图片const [width, height] imageScale(scaleWidth,img.width,img.height);let canvas document.createElement(canvas);img.width canvas.width width;img.height canvas.height height;let ctx canvas.getContext(2d);ctx.drawImage(img, 0, 0, img.width, img.height);canvas.toBlob((blob) {resolve(blob);},image/jpeg,quality);};img.onerror function () {reject();};};});},handleChange(obj, file, fileList) {console.log(file, fileList, file, fileList识别图路径);if (fileList.length 1) {let reader new FileReader()reader.readAsDataURL(file.raw) // 必须用file.rawreader.onload () {let img new Image()img.src reader.resultimg.onload () {console.log(img.width, img.width);console.log(img.height, img.height);// 宽高超过1920则缩小图片分辨率if (img.width 1920 || img.width 1920 || img.height 1920 || img.height 1920) {this.compress(file, 1024).then((blob) {// 根据后端的要求传数据如果要求是blob则不需要处理数据我这边需求是上传file文件流//处理成file文件流 let f new File([blob], image.jpg, { type: image/jpeg })var form {};form new FormData();form.append(file, f);this.$axios.post(this.domins /common/upload, form).then((res) {let index obj.index;this.addList[index].uploadDisabled truethis.addList[index].album res.data.data.fullurlconsole.log(this.addList, addList);})});} else {//宽高不超过1920不处理图片let form {};form new FormData();// form 需要的是el-upload 中的file.rowform.append(file, file.raw);this.$axios.post(this.domins /common/upload, form).then((res) {let index obj.index;this.addList[index].uploadDisabled truethis.addList[index].album res.data.data.fullurlconsole.log(this.addList, addList3333);})}}}}},}
}
/script
