uni-app 文件选择插件讨论 支持小程序安卓 文件查看 - 残阳曦月 限定选择的文件后缀？

在 uni-app 中实现文件选择插件，并限定选择的文件后缀，可以结合 uni.chooseFile API 和文件后缀的校验逻辑来完成。以下是一个简单的代码示例，展示如何在选择文件时限定后缀名，例如只允许选择 .txt 和 .jpg 文件。

代码示例

<template>
  <view>
    <button @click="chooseFile">选择文件</button>
    <view v-if="selectedFiles.length">
      <text>已选择文件:</text>
      <view v-for="(file, index) in selectedFiles" :key="index">
        {{ file.path }} ({{ getFileExtension(file.path) }})
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedFiles: []
    };
  },
  methods: {
    chooseFile() {
      uni.chooseFile({
        count: 9, // 最多可以选择的文件个数
        extension: ['txt', 'jpg'], // 限制文件类型
        success: (res) => {
          const tempFiles = res.tempFiles;
          const validFiles = tempFiles.filter(file => {
            const extension = this.getFileExtension(file.path);
            return ['txt', 'jpg'].includes(extension);
          });
          this.selectedFiles = validFiles;
        },
        fail: (err) => {
          console.error('选择文件失败:', err);
        }
      });
    },
    getFileExtension(filePath) {
      const lastDotIndex = filePath.lastIndexOf('.');
      return filePath.substring(lastDotIndex + 1).toLowerCase();
    }
  }
};
</script>

<style>
/* 添加一些简单的样式 */
button {
  margin: 20px;
  padding: 10px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>

说明

1. 模板部分 (<template>):

   • 一个按钮用于触发文件选择。
   • 一个视图用于显示已选择的文件及其后缀。

2. 脚本部分 (<script>):

   • data 对象中定义了一个 selectedFiles 数组，用于存储选择的文件。
   • chooseFile 方法中调用 uni.chooseFile API，并设置 extension 参数限定文件后缀为 .txt 和 .jpg。
   • 由于 uni.chooseFile 的 extension 参数在某些平台上可能不完全生效（尤其是小程序安卓端），因此在 success 回调中通过 filter 方法再次校验文件后缀。
   • getFileExtension 方法用于获取文件的扩展名。

3. 样式部分 (<style>):

   • 为按钮添加了一些简单的样式。

这个示例展示了如何在 uni-app 中实现文件选择并限定文件后缀。尽管 uni.chooseFile 的 extension 参数可以提供一定的限制，但在实际应用中，最好还是在客户端进行二次校验，以确保文件类型的正确性。