uni-app 全文件上传选择非原生2.0版 - lishanjun DOM重排不理想

发布于 1周前 作者 itying888 来自 Uni-App

uni-app 全文件上传选择非原生2.0版 - lishanjun DOM重排不理想

目前一个很大的问题，当页面高度变化时，点击上传就没反应（内部出发file的input位置就会变动，所以触发不了点击事件）。在实际项目中，会有很多场景会使页面高度发生变化，就是作者示例项目中的重排。DOM重排主动调用show()方法可以解决，但是在实际项目中，很多时候页面高度是被动变化的，你监听不到，比如textarea文字过长时，往页面中添加元素时，总不能在很多地方都调用一下show()吧，代码工作量太大。textarea文字过长总不能监听一下value长度变化吧，况且这不是一个页面，是很多页面都有textarea。

所以有没有更好的解决方法呢，目前我想到的一个方法是：在这个插件内部，定时自调用show()可以解决，但是总感觉不太好，增加内存负担或者会页面体验不好。因为我的项目中大量使用到附件上传，使用附件上传的页面多达100多个。所以相比1.0来说，这2.0着实不好用啊，1.0虽然有个中间层，但至少能接近理想效果。所以这个问题，有没有更好的解决办法呢？


Harmonyos Next教程
1 回复

在处理 uni-app 中的全文件上传功能，尤其是当你提到非原生2.0版且DOM重排不理想时，我们可以通过自定义组件和更精细的布局控制来改善用户体验。以下是一个简化的示例，展示了如何在 uni-app 中实现文件上传功能，同时避免可能的DOM重排问题。

首先，确保你的项目已经配置好并引入了必要的依赖。这里我们主要利用 uni-ui 组件库（如果适用）或者自定义上传按钮和文件处理逻辑。

自定义文件上传组件示例

  1. 创建组件：在 components 目录下创建一个名为 CustomUpload.vue 的组件。
<template>
  <view class="upload-container">
    <button @click="chooseFile">选择文件</button>
    <view v-for="(file, index) in files" :key="index" class="file-item">
      {{ file.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    chooseFile() {
      uni.chooseFile({
        count: 9, // 最多可以选择的文件个数
        success: (res) => {
          this.files = this.files.concat(res.tempFiles);
        }
      });
    }
  }
};
</script>

<style scoped>
.upload-container {
  padding: 20px;
}
.file-item {
  margin-top: 10px;
}
</style>
  1. 在页面中使用组件：在需要使用文件上传功能的页面中引入并使用该组件。
<template>
  <view>
    <CustomUpload />
  </view>
</template>

<script>
import CustomUpload from '@/components/CustomUpload.vue';

export default {
  components: {
    CustomUpload
  }
};
</script>

避免DOM重排的建议

  • 使用 v-for 渲染列表：如上例所示，使用 v-for 指令来渲染文件列表，Vue 会高效地处理DOM更新。
  • CSS布局优化：确保CSS样式不会导致不必要的重绘和重排，比如避免使用复杂的布局或过多的内联样式。
  • 异步操作：文件选择和处理逻辑尽量异步执行，避免阻塞主线程，影响UI渲染。

通过上述代码示例和布局优化建议，你可以有效地实现文件上传功能，并减少DOM重排带来的性能问题。当然，根据具体需求，你可能还需要进一步调整样式和处理逻辑。

回到顶部