uni-app 非图片文件上传

在 uni-app 中处理非图片文件上传时，通常涉及用户选择文件、读取文件内容以及通过 HTTP 请求将文件发送到服务器。以下是一个简单的代码示例，展示如何实现这一过程。

步骤 1：选择文件

使用 <input type="file"> 元素让用户选择文件。在 uni-app 中，可以通过 plus.io API 或 H5+ 的文件选择接口来实现。

<template>
  <view>
    <button @click="chooseFile">选择文件</button>
    <view v-if="fileUrl">
      <text>文件名: {{ fileName }}</text>
      <button @click="uploadFile">上传文件</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: '',
      fileName: ''
    };
  },
  methods: {
    chooseFile() {
      plus.io.resolveLocalFileSystemURL('_www/', entry => {
        entry.getFile('dummy.txt', { create: true, exclusive: false }, fileEntry => {
          fileEntry.createWriter(writer => {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '*'; // 接受所有文件类型
            input.onchange = e => {
              const file = e.target.files[0];
              this.fileName = file.name;
              
              // 读取文件内容（这里仅作为示例，实际上传时可能不需要读取内容）
              const reader = new FileReader();
              reader.onload = event => {
                const content = event.target.result;
                console.log(content);
              };
              reader.readAsText(file);

              // 将文件路径保存到 fileUrl（注意：这里实际上未直接获取到文件的本地路径，仅为示例）
              // 实际开发中，可能需要使用 FormData 对象来封装文件数据
              this.fileUrl = file; // 这里应使用 File 对象本身，而不是路径
            };
            input.click();
          }, error => {
            console.error('Create writer failed: ' + error.message);
          });
        }, error => {
          console.error('Get file failed: ' + error.message);
        });
      }, error => {
        console.error('Resolve URL failed: ' + error.message);
      });
    },
    uploadFile() {
      if (!this.fileUrl) return;

      const formData = new FormData();
      formData.append('file', this.fileUrl); // 注意：这里应确保 fileUrl 是 File 对象

      uni.uploadFile({
        url: 'https://your-server.com/upload', // 替换为你的服务器上传接口
        filePath: this.fileUrl.path, // 如果 fileUrl 是 File 对象，可能需要特殊处理以获取路径
        name: 'file',
        formData: {
          // 其他表单数据（可选）
        },
        success: uploadFileRes => {
          console.log('Upload success:', uploadFileRes);
        },
        fail: error => {
          console.error('Upload failed:', error);
        }
      });
    }
  }
};
</script>

注意事项

1. 文件路径：在 H5 环境中，File 对象本身即可用于上传，无需转换为本地路径。在 App 环境中，可能需要使用 plus.io API 获取文件的本地路径。
2. FormData：使用 FormData 对象封装文件数据，便于通过 HTTP 请求发送。
3. 错误处理：添加适当的错误处理逻辑，确保用户体验。

以上代码是一个基本的实现框架，实际项目中可能需要根据具体需求进行调整和优化。