uni-app文件上传与下载

在移动应用开发中，文件上传和下载是常见且重要的功能。uni-app作为一款跨平台框架，能够同时构建iOS和Android应用，其强大的API支持使得文件操作变得相对简单。本文将详细介绍如何在uni-app中实现文件上传与下载的功能，并提供相应的示例代码。

一、文件上传

1.1 前端文件上传

在uni-app中，使用uni.uploadFile API进行文件上传。以下是一个简单的示例：

uni.uploadFile({
  url: 'https://your-server-url/api/upload', // 服务器接口地址
  filePath: '/path/to/your/local/file', // 本地文件路径
  name: 'file', // formData中的文件字段名，默认为file
  header: {
    'content-type': 'multipart/form-data'
  },
  success(res) {
    console.log('文件上传成功:', res);
    // 在这里处理服务器返回的数据
  },
  fail(err) {
    console.error('文件上传失败:', err);
    // 处理上传失败的情况
  }
});

1.2 后端处理

后端接收上传的文件时，通常需要解析multipart/form-data格式的数据。以下是一个简单的Node.js示例：

const express = require('express');
const app = express();
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.post('/api/upload', function (req, res) {
  const file = req.files.file;
  if (!file) {
    return res.status(400).send('No file attached');
  }
  file.mv('./uploads/' + file.name, function (err) {
    if (err) {
      return res.status(500).send('Error saving file');
    }
    res.send('File uploaded successfully');
  });
});

app.listen(3000);

二、文件下载

2.1 前端获取文件链接

在uni-app中，可以通过HTTP请求获取文件的URL，然后使用uni.downloadFile API下载文件。以下是一个示例：

uni.downloadFile({
  url: 'https://your-server-url/files/myfile.pdf', // 文件的URL
  success(res) {
    const localId = res.tempFilePath; // 获取下载文件的临时路径
    console.log('文件下载成功:', localId);
    // 在这里可以处理下载的文件，如展示预览等
  },
  fail(err) {
    console.error('文件下载失败:', err);
    // 处理下载失败的情况
  }
});

2.2 后端提供下载链接

后端生成文件下载链接通常是通过设置响应头来控制。以下是一个简单的Node.js示例：

app.get('/files/:filename', function (req, res) {
  const filename = req.params.filename;
  const path = './uploads/' + filename;
  const fileStream = fs.createReadStream(path);

  res.setHeader('Content-Disposition', 'attachment; filename="' + filename + '"');
  fileStream.pipe(res);
});

结语

通过上述示例，我们了解了如何在uni-app中实现文件的上传与下载功能。实际应用中，还需要根据具体的业务需求和安全策略对这些功能进行扩展和优化。无论是前端的文件上传还是后端的文件处理，都需要考虑到性能优化、错误处理以及数据安全等问题。