uni-file-picker修改文件样式，根据不同文件类型展示不同样式

uni-file-picker 是一款用于 Vue.js 或者 Uni-app 的轻量级文件选择组件，它允许用户从本地或者网络选择文件。如果你想修改文件样式的显示，以便根据不同类型的文件展示不同的样式，你可以通过以下几个步骤来实现：

1. **事件监听**: 在文件选择后，`on-success` 事件会触发，这时可以获取到选中的文件信息。

<template>
  <uni-file-picker v-model="selectedFiles" on-success="handleSuccess"></uni-file-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedFiles: []
    };
  },
  methods: {
    handleSuccess(files) {
      files.forEach(file => {
        // 对每个文件做处理
      });
    }
  }
}
</script>

2. **检查文件类型**: 使用 `File.prototype.type` 属性检查文件类型，常见的文件类型可以对应不同的 CSS 类名。

handleSuccess(files) {
  files.forEach(file => {
    const fileType = file.type;
    
    if (fileType.includes('image')) { // 图片文件
      file.customClass = 'image-file'; // 给文件添加自定义样式类
    } else if (fileType.includes('audio')) { // 音频文件
      file.customClass = 'audio-file';
    } else if (fileType.includes('video')) { // 视频文件
      file.customClass = 'video-file';
    } else { // 其他文件
      file.customClass = 'other-file';
    }
  });
}

3. **CSS样式定义**: 创建对应的 CSS 样式，针对不同文件类型应用不同的样式。

.image-file {
  /* 图片文件样式 */
}

.audio-file {
  /* 音频文件样式 */
}

.video-file {
  /* 视频文件样式 */
}

.other-file {
  /* 其他文件样式 */
}