uni-app 文件选择 上传文件组件

在处理 uni-app 中的文件选择和上传功能时，你可以使用 <input type="file"> 元素结合 uni.uploadFile API 来实现。以下是一个完整的代码案例，展示了如何在 uni-app 中创建一个文件选择上传组件。

1. 创建组件 FileUpload.vue

<template>
  <view class="container">
    <button type="primary" @click="chooseFile">选择文件</button>
    <view v-if="fileInfo">
      <text>文件名: {{ fileInfo.name }}</text>
      <image :src="fileInfo.path" mode="widthFix" style="width: 100px;"></image>
      <button type="primary" @click="uploadFile">上传文件</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fileInfo: null,
    };
  },
  methods: {
    chooseFile() {
      uni.chooseMessageFile({
        count: 1,
        type: 'file',
        extension: ['*'], // 允许所有文件类型
        success: (res) => {
          this.fileInfo = res.tempFiles[0];
        },
        fail: (err) => {
          console.error('选择文件失败', err);
        },
      });
    },
    uploadFile() {
      if (!this.fileInfo) {
        uni.showToast({ title: '请先选择文件', icon: 'none' });
        return;
      }
      uni.uploadFile({
        url: 'https://your-server-upload-url.com/upload', // 替换为你的上传接口
        filePath: this.fileInfo.path,
        name: 'file',
        formData: {
          user: 'test'
        },
        success: (uploadFileRes) => {
          console.log('上传成功', uploadFileRes);
          uni.showToast({ title: '上传成功', icon: 'success' });
        },
        fail: (err) => {
          console.error('上传失败', err);
          uni.showToast({ title: '上传失败', icon: 'none' });
        },
      });
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}
button {
  margin-top: 10px;
}
</style>

2. 使用组件

在你的页面或其他组件中引入并使用这个 FileUpload 组件。

<template>
  <view>
    <FileUpload />
  </view>
</template>

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

export default {
  components: {
    FileUpload,
  },
};
</script>

注意事项

1. 权限配置：确保在 manifest.json 中配置了必要的文件读写权限。
2. URL替换：在 uni.uploadFile 的 url 参数中，替换为实际的服务器上传接口。
3. 错误处理：根据实际业务需求，增加更多的错误处理和用户反馈。

这个组件示例展示了基本的文件选择和上传功能，你可以根据具体需求进行扩展和优化。