uni-app 上传大文件怎么分片

同问

请问解决了吗?我也遇到同样的问题

断点续传，同问

我来扒坟！顺便问一下你们解决了吗？

扒坟！

扒坟！抬走，下一个继续……

有解决办法了记得踢我

大文件切片、分块、分段、分片，数据可用于分块上传(ios、android)：https://ext.dcloud.net.cn/plugin?id=3319

大文件分块上传到现在都还没人做过吗?这个功能还是很普遍需要的,官方也没有提供些方法

同上问！

同问

在使用 Uni-app 上传大文件时，为了提高上传的成功率和效率，通常会将文件分片（分割成多个小块）进行上传。下面将详细介绍如何在 Uni-app 中实现文件的分片上传，包括前端分片处理和后端合并文件的步骤。

一、前端分片处理

1. 选择文件

首先，使用 <input type="file"> 组件或 Uni-app 提供的 API 选择需要上传的大文件。

<template>  
  <view>  
    <button @click="chooseFile">选择文件</button>  
  </view>  
</template>  

<script>  
export default {  
  methods: {  
    chooseFile() {  
      uni.chooseMessageFile({  
        count: 1, // 默认选择1个文件  
        type: 'file',  
        success: (res) => {  
          const file = res.tempFiles[0];  
          this.uploadFile(file);  
        }  
      });  
    },  
    // 上传文件方法  
    uploadFile(file) {  
      const chunkSize = 1024 * 1024; // 每个分片的大小，这里设置为1MB  
      const chunks = Math.ceil(file.size / chunkSize);  
      let currentChunk = 0;  

      const uploadChunk = () => {  
        const start = currentChunk * chunkSize;  
        const end = Math.min(file.size, start + chunkSize);  
        const chunk = file.slice(start, end);  

        // 创建 FormData 并添加分片数据  
        const formData = new FormData();  
        formData.append('file', chunk);  
        formData.append('chunkIndex', currentChunk);  
        formData.append('totalChunks', chunks);  
        formData.append('fileName', file.name);  

        uni.uploadFile({  
          url: 'https://your-server.com/upload', // 替换为你的服务器上传接口  
          filePath: chunk, // 这里需要注意，uni.uploadFile 不支持直接传 Blob，需要使用其他方式  
          name: 'file',  
          formData: {  
            chunkIndex: currentChunk,  
            totalChunks: chunks,  
            fileName: file.name  
          },  
          success: (res) => {  
            const data = JSON.parse(res.data);  
            if (data.success) {  
              currentChunk++;  
              if (currentChunk < chunks) {  
                uploadChunk();  
              } else {  
                uni.showToast({  
                  title: '上传完成',  
                  icon: 'success'  
                });  
              }  
            } else {  
              uni.showToast({  
                title: '上传失败',  
                icon: 'none'  
              });  
            }  
          },  
          fail: () => {  
            uni.showToast({  
              title: '上传失败',  
              icon: 'none'  
            });  
          }  
        });  
      };  

      uploadChunk();  
    }  
  }  
}  
</script>

注意：uni.uploadFile 方法在实际使用中可能不支持直接上传 Blob 对象，因此需要采用其他方式，如使用 wx.uploadFile（针对微信小程序）或通过 fetch API 结合 FormData 进行分片上传。

2. 使用 fetch 进行分片上传（适用于更多平台）

为了更好地支持多平台，可以使用 uni.request 或 fetch 来实现分片上传。以下示例使用 fetch：

uploadFile(file) {  
  const chunkSize = 1024 * 1024; // 1MB  
  const chunks = Math.ceil(file.size / chunkSize);  
  let currentChunk = 0;  

  const uploadChunk = () => {  
    if (currentChunk >= chunks) {  
      // 所有分片上传完成  
      uni.showToast({  
        title: '上传完成',  
        icon: 'success'  
      });  
      return;  
    }  

    const start = currentChunk * chunkSize;  
    const end = Math.min(file.size, start + chunkSize);  
    const chunk = file.slice(start, end);  

    const formData = new FormData();  
    formData.append('file', chunk);  
    formData.append('chunkIndex', currentChunk);  
    formData.append('totalChunks', chunks);  
    formData.append('fileName', file.name);  

    fetch('https://your-server.com/upload', {  
      method: 'POST',  
      body: formData  
    })  
    .then(response => response.json())  
    .then(data => {  
      if (data.success) {  
        currentChunk++;  
        uploadChunk();  
      } else {  
        uni.showToast({  
          title: '上传失败',  
          icon: 'none'  
        });  
      }  
    })  
    .catch(error => {  
      console.error('上传错误:', error);  
      uni.showToast({  
        title: '上传失败',  
        icon: 'none'  
      });  
    });  
  };  

  uploadChunk();  
}

注意：由于 uni-app 的 fetch 支持情况，确保目标平台支持 FormData 和 fetch API，或者使用 uni.request 进行封装。

3. 使用第三方插件

为了简化分片上传的实现，可以使用一些第三方插件，如 @dcloudio/uni-upload 或其他开源的分片上传库。这些插件通常封装了复杂的分片逻辑，提供更简便的接口供开发者使用。

二、后端合并文件

前端完成分片上传后，后端需要接收这些分片并将它们合并成完整的文件。以下以 Node.js 为例，展示如何实现文件合并：

1. 接收分片

假设使用 Express 框架，可以创建一个上传接口来接收分片：

const express = require('express');  
const multer = require('multer');  
const fs = require('fs');  
const path = require('path');  

const app = express();  
const upload = multer({ dest: 'uploads/' });  

app.post('/upload', upload.single('file'), (req, res) => {  
  const { chunkIndex, totalChunks, fileName } = req.body;  
  const chunkPath = path.join('uploads', `${fileName}.part${chunkIndex}`);  

  // 将分片移动到指定目录  
  fs.renameSync(req.file.path, chunkPath);  

  // 检查是否所有分片都已上传  
  if (parseInt(chunkIndex) === parseInt(totalChunks) - 1) {  
    // 合并分片  
    const filePath = path.join('uploads', fileName);  
    const writeStream = fs.createWriteStream(filePath);  

    for (let i = 0; i < totalChunks; i++) {  
      const partPath = path.join('uploads', `${fileName}.part${i}`);  
      const partReadStream = fs.createReadStream(partPath);  
      partReadStream.pipe(writeStream, { end: false });  
      partReadStream.on('end', () => {  
        // 删除分片文件  
        fs.unlinkSync(partPath);  
      });  
    }  

    writeStream.on('finish', () => {  
      res.json({ success: true });  
    });  
  } else {  
    res.json({ success: true });  
  }  
});  

app.listen(3000, () => {  
  console.log('服务器运行在 http://localhost:3000');  
});

注意：上述示例为简化版，实际应用中需要处理更多边界情况，如错误处理、并发控制、安全性验证等。

2. 使用流进行高效合并

为了提高效率，可以使用流（Streams）来处理分片合并：

const express = require('express');  
const multer = require('multer');  
const fs = require('fs');  
const path = require('path');  

const app = express();  
const upload = multer({ dest: 'uploads/' });  

app.post('/upload', upload.single('file'), (req, res) => {  
  const { chunkIndex, totalChunks, fileName } = req.body;  
  const chunkPath = path.join('uploads', `${fileName}.part${chunkIndex}`);  

  fs.renameSync(req.file.path, chunkPath);  

  if (parseInt(chunkIndex) === parseInt(totalChunks) - 1) {  
    const filePath = path.join('uploads', fileName);  
    const writeStream = fs.createWriteStream(filePath);  

    for (let i = 0; i < totalChunks; i++) {  
      const partPath = path.join('uploads', `${fileName}.part${i}`);  
      const readStream = fs.createReadStream(partPath);  
      readStream.pipe(writeStream, { end: false });  
      readStream.on('end', () => {  
        fs.unlinkSync(partPath);  
      });  
    }  

    writeStream.on('finish', () => {  
      res.json({ success: true });  
    });  
  } else {  
    res.json({ success: true });  
  }  
});  

// 更优化的合并方式  
app.post('/upload', upload.array('file'), (req, res) => {  
  // 实现更高效的合并逻辑  
});  

app.listen(3000, () => { /* ... */ });

推荐使用支持流的库，如 multer 结合 stream 模块，或其他专门处理分片上传的中间件，如 multer-s3（用于上传到 AWS S3）等。

三、优化与注意事项

1. 断点续传：在分片上传过程中，如果网络中断，可以实现断点续传功能，只重新上传未完成的分片，提高上传效率。

2. 并发上传：可以同时上传多个分片，加快整体上传速度，但需要注意服务器的负载能力。

3. 错误处理：对每个分片的上传进行错误捕获和处理，确保上传过程的稳定性。

4. 安全性：验证上传的分片来源，防止恶意攻击；对上传的文件进行必要的校验，如文件类型、大小等。

5. 进度显示：通过监听每个分片的上传进度，实时显示上传进度条，提升用户体验。

6. 跨域处理：如果前端和后端不在同一域名下，需要处理跨域问题（CORS）。

四、示例项目

为了更好地理解和实践分片上传，可以参考以下开源项目：

• uni-app 分片上传示例 (请根据实际情况搜索相关项目)
• Web 分片上传与断点续传示例

通过参考这些项目，可以更直观地了解分片上传的具体实现方式，并根据项目需求进行调整和优化。

总结

在 Uni-app 中实现大文件的分片上传，主要涉及前端的分片处理和后端的合并逻辑。通过合理地分割文件、逐片上传以及后端的合并处理，可以有效提高大文件的上传成功率和效率。同时，结合断点续传、并发上传、错误处理等技术手段，可以进一步提升用户体验和系统的稳定性。