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

39次阅读

共计 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

正文完
 0