UniApp 的 `
uni-file-picker` 是一个用于文件选择和上传的功能组件。以下是一个基本的手动上传文件的完整案例：
首先，在你的 `.vue` 文件中，引入所需的依赖并设置组件的属性：
```html
<template>
<view>
<button @click="openFilePicker">选择文件</button>
<input type="file" ref="uploadFile" :multiple="true" @change="handleFileChange" style="display: none;">
<div v-if="selectedFiles.length">
<p>已选择文件: {{ selectedFiles.length }}</p>
<ul>
<li v-for="(file, index) in selectedFiles" :key="index">
{{ file.name }}
<button @click="uploadFile(file)">上传</button>
</li>
</ul>
</div>
</view>
</template>
<script>
export default {
data() {
return {
selectedFiles: [],
};
},
methods: {
openFilePicker() {
uni.showActionSheet({
title: '选择文件',
items: ['相册', '文件管理', '取消'],
success: (res) => {
if (res.actionIndex === 0) { // 相册
uni.getImagePicker({
sourceType: ['
album', 'camera'], // 可选值：['
album', 'camera', 'temp'], 默认值：['
album']
success: (pickerRes) => {
this.handleImagePickerResult(pickerRes);
},
});
} else if (res.actionIndex === 1) { // 文件管理
this.$refs.uploadFile.click();
}
},
});
},
handleImagePickerResult(pickerRes) {
if (pickerRes.resultType === 'image') {
this.selectedFiles.push({
name: pickerRes.fileName,
url: pickerRes.tempFilePath, // 这里是临时文件路径，如果需要上传，需转换为其他格式
});
} else if (pickerRes.resultType === 'file') {
this.selectedFiles.push({
name: pickerRes.fileName,
url: pickerRes.filePath, // 这里是永久文件路径，可以直接上传
});
}
},
uploadFile(file) {
uni.uploadFile({
url: '你的服务器上传接口地址', // 替换为实际的上传接口
filePath: file.url, //
使用选择的文件的路径
header: {}, // 如果有需要，可以添加请求头
success: (res) => {
console.log('上传成功', res.data);
},
fail: (err) => {
console.error('上传失败', err);
},
});
},
handleFileChange(e) {
this.selectedFiles = e.target.files;
},
},
};
</script>
```
在这个例子中，我们创建了一个按钮触发文件选择器，当用户选择文件后，会
显示所选文件列表并提供上传功能。`uploadFile` 方法负责实际的文件上传。
相关问题--:
1. 在这个案例中，`
uni.showActionSheet` 和 `
uni.getImagePicker` 分别用来做什么？
2. 如何处理图片和非图片类型的文件上传？
3. 如何在实际项目中替换`'你的服务器上传接口地址'`？
本文讲述了在uniapp中使用uview的u-album相册组件时，遇到图片下载功能在微信开发者工具和手机小程序预览差异的问题，解决方法在于配置小程序后台的downloadFile合法域名，操作包括刷新配置和重新编译。
扫一扫
695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
