uniapp项目中使用＜uni-file-picker＞＜/uni-file-picker＞，实现限制用户上传图片大小，并不回显（vue3+ts）

问题描述：

我昨天在使用uniapp组件<uni-file-picker></uni-file-picker>时，想实现限制用户上传图片大小时，发现虽然可以通过监听@select="onSelectImg"事件拿到本次上传的数据，在后续发送时也可以通过判断event.tempFiles来获取图片size但数据还是会回显。

问题解决：

通过查阅官方文档发现，可以使用clearFiles(index:Number)来进行指定删除，但是！继续查阅文档后发现——（官方）

{
	"progress"			: Number, 		// 上传进度 ，仅 @progress 事件包含此字段
	"index"				: Number, 		// 上传文件索引 ，仅 @progress 事件包含此字段
	"tempFile"			: file, 		// 当前文件对象 ，包含文件流，文件大小，文件名称等，仅 @progress 事件包含此字段
	"tempFiles"			: files, 		// 文件列表,包含文件流，文件大小，文件名称等
	"tempFilePaths"		: filePaths, 	// 文件地址列表，@sucess 事件为上传后的线上文件地址
}

这个index想要不监听@progress事件很难拿到，但是这个事件的触发又需要其他配置（见官网），所以拿索引这个思路很难实现（试过一小时）。再去官网查看，我发现有个东西可能可以实现——v-model。官网介绍：其实这里也有很大的坑，感觉他这绑了又好像没有绑，但回显数据确实可以利用其修改，通过控制台打印，可以知道其值类型和触发搜索时event.tempFiles的类型一致，这里需要用到"@uni-helper/uni-ui-types"这个类型，其类型为UniFilePickerTempFile[],不废话了上代码——

const uploadData = ref<yourType[]>([]) //上传准备的数据可用来存储发送后返回img的url
const upImg = ref<UniFilePickerTempFile[]>([]) // v-model绑定的对象
/**
 * 选择图片时
 * @param event
 */
const onSelectImg: UniFilePickerOnSelect = async (event) => {
  // 过滤掉size大于5mb的数据（这步很关键）
  const tempFiles = event.tempFiles.filter((item) => item.size < 1024 * 1024 * 5)
  tempFiles.length < event.tempFiles.length ?  uni.showToast({title: '图片大小不能超过5MB！请重新选择图片', icon: 'none',duration:3000}) : ''
  if (upImg.value.length > 0 && tempFiles.length === 0) {
    console.log('没有合规项且之前已有添加')
    upImg.value = upImg.value.slice(0, upImg.value.length);
    return // 本次添加没有合规的图片如果后续要发请求可直接return
  } else if (upImg.value.length > 0 && tempFiles.length > 0) {
    console.log('有合规项且之前已有添加')
    upImg.value = upImg.value.concat(tempFiles)
  } else {
    upImg.value = tempFiles // 初始值
    console.log('之前没有添加')
  }

  // 准备发送（这里回显数据的值已经过滤完成）
  const url = RequestEnums.BASE_URL + '/upload'
  for (let i = 0; i < tempFiles.length; i++) {
    // 上传图片
    const uploadTask = uni.uploadFile({
      url: url,
      filePath: tempFiles[i].path,
      name: 'file',
      success: (uploadFileRes) => {
        //上传完成后后端返回数据处理
        //建议每个图片同时存入uuid,方便后续处理如——
        /*        if (uploadData.value.imgURL)
          uploadData.value.imgURL.push({uid: tempFiles[i].uuid, url: res.data.imgURL})
        else uploadData.value.imgURL = [{uid: tempFiles[i].uuid as string, url: res.data.imgURL as string}]*/
      }
    });
//可以对上传进度监听
    uploadTask.onProgressUpdate((res) => {
      /*      // 测试条件，取消上传任务。
            if (res.progress > 50) {
              uploadTask.abort();
            }*/
    })
  }
}

HTML——

<uni-file-picker ref="uploadImg" v-model="upImg" 
       :auto-upload="false" 
       file-mediatype="image"
       limit="5" title="最多选择5张图片" 
       @delete="onDeleteImg" 
       @select="onSelectImg">
</uni-file-picker>

当用户删除时可以通过tempFiles对象中的uuid来判断，(建议在上传完成后同时存入uuid,uuid为本次合规且上传完成的图片)例如——

const onDeleteImg: UniFilePickerOnDelete = (event) => {
  let uuid = event.tempFile.uuid
  uploadData.value.imgURL.map((item, index) => {
    if (item.uid === uuid) {
      uploadData.value.imgURL.splice(index, 1)
      return
    }
  })
}