共计 2526 个字符，预计需要花费 7 分钟才能阅读完成。
前言
因我的项目上应用了 uniapp，并且应用 uview1.0 作为 ui 框架，然而应用过程中发现 u -upload 组件的 before-upload 属性有 bug，顺便记录下来分享给大家，心愿可能帮忙到大家。
操作
u-upload 组件的 before-upload 属性我限度了上传图片大小，然而它还是显示上传胜利了，于是网上搜寻解决方案，并且批改了 u -upload 组件的源码才彻底解决。
1、批改 u -upload 组件源码
...
let flag = false
// 执行 before-upload 钩子
if(this.beforeUpload && typeof(this.beforeUpload) === 'function') {
// 执行回调，同时传入索引和文件列表当作参数
// 在微信，支付宝等环境 (H5 失常)，会导致父组件定义的 customBack() 函数体中的 this 变成子组件的 this
// 通过 bind()办法，绑定父组件的 this，让 this.customBack()的 this 为父组件的上下文
// 因为 upload 组件可能会被嵌套在其余组件内，比方 u -form，这时 this.$parent 其实为 u -form 的 this，// 非页面的 this，所以这里须要往上历遍，始终寻找到最顶端的 $parent，这里用了 this.$u.$parent.call(this)
// 明确意思即可，无需纠结 this.$u.$parent.call(this)的细节
let beforeResponse = this.beforeUpload.bind(this.$u.$parent.call(this))(index, this.lists);
// 判断是否返回了 promise
if (!!beforeResponse && typeof beforeResponse.then === 'function') {
await beforeResponse.then(res => {// promise 返回胜利，不进行动作，持续上传}).catch(err => {
flag = true
this.lists.splice(index, 1);
this.$forceUpdate();
// 进入 catch 回调的话，持续下一张
return this.uploadFile(index + 1);
})
// promise 或 async 返回 false，或进入 catch 回调，持续下一张；否则不进行动作，持续上传
} else if(beforeResponse === false) {
// 如果返回 false，持续下一张图片的上传
return this.uploadFile(index + 1);
} else {// 此处为返回 "true" 的情景，这里不写代码，就跳过此处，继续执行以后的上传逻辑}}
// 查看上传地址
if (!this.action) {this.showToast('请配置上传地址', true);
return;
}
// 如果在 beforeUpload 中被回绝，则不往后执行
if(flag) return false大家能够参考我的代码进行批改
2、批改 before-upload 属性办法
u-upload 组件：
<u-upload
ref="uUpload"
:action="upload.action"
:custom-btn="true"
:auto-upload="true"
:file-list="upload.fileList"
max-count="5"
:header= "{'Content-Type':'multipart/form-data','Authorization': `Bearer ${$store.state.vuex_token}`}"
:before-upload="beforeUpload"
@on-change='uploadImgChange'>
<view class="uploadimg" slot="addBtn">
<image class="img" :src="mediaPrefix +'wxresource/user/upload_default.png'"mode="widthFix"></image>
</view>
</u-upload>beforeUpload 办法：
beforeUpload(index, fileList){const file = fileList[index];
console.log('beforeUpload file',JSON.stringify(file))
return new Promise((resolve, reject) => {// 应用 uni.getImageInfo()获取图片理论尺寸
uni.getImageInfo({
src: file.url,
success: function(info) {console.log('info.width=',info.width)
const width = info.width;
const height = info.height;
// 判断图片尺寸是否超过最大值
if (width && height) {
let f = 1
if(width>height){f = width/height}
if(height>width){f = height/width}
if(f>2){
uni.showToast({
title: ` 请上传长宽比为 2:1 范畴内尺寸的图片 `,
icon: 'none',
duration: 5000
});
reject('请上传长宽比为 2:1 范畴内尺寸的图片');
}
}
resolve(file);
},
fail: function() {
uni.showToast({
title: '获取图片信息失败',
icon: 'none'
});
return reject();}
});
});
},这样就解决了限度图片上传问题。
总结
1、u-upload 的 before-upload 属性源码有 bug，网友曾经发现了，并且也提了 PR 可是官网并没有跟进
援用
before-upload 用 async 返回 false 仍执行上传
修复 before-upload 和 before-remove 应用 async 返回 false 仍往下执行的问题 #1124
正文完