首页uni-file-picker 上传回显样式自定义

uni-file-picker 上传回显样式自定义

时间: 2024-11-29 14:04:28 浏览: 100

uni-file-picker 是 UniApp 中的一个文件选择组件，它允许用户从本地或者网络选择文件。如果想要自定义上传后的回显样式，UniFilePicker 提供了回调函数 `onChoose` 和一些配置选项。在 `onChoose` 回调中，你可以获取到所选文件的信息，并可以根据需要更新界面展示。例如： ```javascript <template> <view> <uni-file-picker :onChoose="handleChoose" />  <view v-if="fileList.length > 0"> <image :src="fileList[0].path" :mode="listMode" @click="deleteFile(fileList[0])" /> <text>{{ fileList[0].name }}</text> </view> </view> </template> <script> export default { data() { return { fileList: [], listMode: 'AspectFit', // 图片显示模式 }; }, methods: { handleChoose(result) { this.fileList = result.files; // 存储上传的文件 // 根据需要处理样式，比如修改背景色、添加边框等 for (let file of this.fileList) { file.styleClass = "custom-file-style"; // 添加自定义样式的 class 名称 } }, deleteFile(file) { this.fileList = this.fileList.filter(f => f !== file); }, }, }; </script> <style scoped> .custom-file-style { background-color: #f5f5f5; border: 1px solid #ccc; } </style> ``` 在这个例子中，我们通过 `handleChoose` 函数接收文件列表，然后为每个文件添加了一个名为 `custom-file-style` 的 CSS 类，以便自定义它们的样式。

阅读全文