关于uniapp:uniapp解决uview10-uupload组件使用beforeupload属性限制图片比例问题

前言

因我的项目上应用了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