uniapp 手动上传

### 如何在 UniApp 中实现文件的手动上传功能

#### 1. 准备工作
为了实现在 UniApp 中手动上传文件的功能，需先确保开发环境已准备好，并安装必要的依赖项。对于文件上传操作，通常会涉及到前端页面设计、文件选择逻辑以及与服务器交互的部分。

#### 2. 创建文件选择界面
可以利用 `uni.chooseFile` API 来让用户选取要上传的文件。此方法允许开发者指定可选文件类型和其他选项[^1]：

// 调用 chooseFile 方法打开本地文件选择器
uni.chooseFile({
    count: 1, // 默认9
    type: 'all', // 可以设定只可以选择图片："image"
    sourceType: ['album'], // album：从相册选图；camera：使用相机拍照
    success(res) {
        console.log('chooseFile result:', res);
        const tempFilePaths = res.tempFiles;
        
        // 这里可以根据需求做进一步处理，比如显示预览等
    }
});

#### 3. 构建上传请求体
当选择了目标文件之后，下一步就是构建用于发送给服务端的数据包。考虑到大多数情况下后端期望接收到的是 `multipart/form-data` 形式的表单数据，在这里应该创建 FormData 对象并将选定文件加入其中[^2]:

let formData = new FormData();
formData.append("files", tempFilePaths[0]); // 假设仅上传一个文件

#### 4. 发起 HTTP 请求完成上传过程
最后一步是通过 AJAX 或者 Fetch API 向远程服务器提交包含所选文件在内的 POST 请求。需要注意设置合适的 Content-Type 头部信息以便于正确解析传入的内容[^4]:

uni.uploadFile({
    url: 'http://localhost:5050/upload', // 替换成实际的服务端地址
    filePath: tempFilePaths[0].path,
    name: 'file',
    header: {'content-type': 'multipart/form-data'},
    formData: {user: 'test'}, // 如果有额外参数需要传递的话
    success(uploadRes) {
        console.log('Upload Success');
        console.log(JSON.parse(uploadRes.data));
    },
    fail(err){
        console.error('Upload Failed', err);
    }
});

以上就是在 UniApp 应用程序内实施基本文件上传流程的主要步骤概述。当然具体实现可能会因业务场景的不同而有所变化，但上述指南提供了一个良好的起点[^1].