uniapp h5端上传文件

### 文件上传功能的实现方法与示例 在 H5 端使用 UniApp 实现文件上传功能时，可以结合 HTML 的 `<input type="file">` 元素和 UniApp 提供的 API 来完成。以下是一个完整的实现方法，包括文件选择、上传、预览和删除等功能。 #### 1. 文件选择 通过 `<input type="file">` 元素允许用户选择文件。可以选择单个或多个文件，并将其传递给后端进行处理。 ```html <input type="file" id="fileInput" accept=".pdf" multiple /> ``` #### 2. 文件上传 使用 `uni.uploadFile` 方法将选中的文件上传到服务器。以下是一个示例代码： ```javascript document.getElementById('fileInput').addEventListener('change', function(e) { const files = e.target.files; for (let i = 0; i < files.length; i++) { const file = files[i]; const filePath = URL.createObjectURL(file); // 创建临时路径 uni.uploadFile({ url: 'https://your-server-url/upload', // 替换为实际的上传接口地址 filePath: filePath, name: 'file', formData: { user: 'testUser' }, success: (uploadRes) => { console.log('上传成功', uploadRes); // 处理上传成功的回调逻辑 }, fail: (err) => { console.error('上传失败', err); } }); } }); ``` #### 3. 文件预览 对于 PDF 文件，可以使用 `window.open` 或者 `uni.openDocument` 方法进行预览。以下是示例代码： ```javascript function previewFile(filePath) { if (filePath.endsWith('.pdf')) { window.open(filePath, '_blank'); // 在新标签页中打开 PDF 文件 } else { uni.openDocument({ filePath: filePath, success: () => { console.log('文件预览成功'); }, fail: (err) => { console.error('文件预览失败', err); } }); } } ``` #### 4. 文件下载 使用 `uni.downloadFile` 方法将文件下载到本地。以下是一个示例代码： ```javascript function downloadFile(item) { const downloadLink = item.url; window.open(downloadLink, '_blank'); // H5 端直接跳转页面打开 uni.downloadFile({ url: item.url, // 后端返回的完整路径 success: (res) => { if (res.statusCode === 200) { const tempFilePath = res.tempFilePath; // 获取临时文件路径 console.log('下载成功', tempFilePath); } }, fail: (err) => { console.error('下载失败', err); } }); } ``` #### 5. 文件删除 文件删除功能通常需要调用后端接口来移除服务器上的文件。以下是一个示例代码： ```javascript function deleteFile(fileId) { uni.request({ url: 'https://your-server-url/delete', // 替换为实际的删除接口地址 method: 'POST', data: { fileId: fileId }, success: (res) => { console.log('删除成功', res); }, fail: (err) => { console.error('删除失败', err); } }); } ``` ### 注意事项 - 在 H5 端，`uni.uploadFile` 和 `uni.downloadFile` 的行为可能与原生平台略有不同，需根据具体场景调整实现方式[^1]。 - 文件上传时需要注意跨域问题，确保后端接口支持 CORS 请求[^2]。