uniapp上传视频

在UniApp中实现视频上传功能可以是一个有趣且具有挑战性的任务。UniApp是一个使用Vue.js实现跨平台应用开发的框架，支持iOS、Android、H5等多个平台。这使得我们能在一个代码库中开发多平台应用，从而大大提高了开发效率。接下来，我们将深入探讨UniApp中如何实现视频上传功能。

准备工作

在实现视频上传功能之前，我们需要确保开发环境搭建完毕。首先，确保您已经安装了Node.js和npm，这两个工具是前端开发的必备条件。接下来，安装HBuilderX，这是UniApp的官方IDE，提供了诸多便捷的开发工具和插件，能够帮助我们快速开发和调试应用。

创建项目

打开HBuilderX，选择“文件”->“新建”->“项目…”，然后选择“UniApp”模块。选择模板后，输入项目名称并选择项目存储路径，即可创建一个新的UniApp项目。

视频上传的UI设计

首先，我们设计一个简单的用户界面（UI）来选择并上传视频文件。在pages/index/index.vue文件中，我们将添加以下代码：

<template>
  <view class="content">
    <button type="primary" @click="chooseVideo">选择视频</button>
    <view v-if="videoPath">视频路径：{{ videoPath }}</view>
    <button type="primary" @click="uploadVideo" :disabled="!videoPath">上传视频</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoPath: ''
    };
  },
  methods: {
    chooseVideo() {
      // 调用API选择视频
    },
    uploadVideo() {
      // 调用API上传视频
    }
  }
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}
button {
  margin: 10px;
}
</style>

在这个简单的UI中，我们有两个按钮：一个用于选择视频，另一个用于上传选中的视频。此外，我们还显示了用户选择的视频路径。对于上传按钮，如果没有视频被选中，则它是禁用的。

选择视频

UniApp提供了丰富的API来访问设备的功能，选择视频可以使用uni.chooseVideo。以下是在chooseVideo方法中的实现：

methods: {
  chooseVideo() {
    uni.chooseVideo({
      sourceType: ['album', 'camera'], // 选择视频的来源
      maxDuration: 60, // 拍摄时视频最长拍摄时间，单位秒
      camera: 'back', // 默认使用后置摄像头
      success: (res) => {
        this.videoPath = res.tempFilePath; // 临时文件路径
        uni.showToast({
          title: '视频选择成功',
          icon: 'success'
        });
      },
      fail: (error) => {
        uni.showToast({
          title: '视频选择失败',
          icon: 'error'
        });
        console.error('chooseVideo error:', error);
      }
    });
  },
  // uploadVideo 方法保持不变
}

此代码调用了uni.chooseVideo API，选择完成后会获取视频的临时文件路径并更新到videoPath变量中。这也是我们上传视频时需要用到的路径。

上传视频

上传视频需要将本地的视频文件上传到服务器。为了实现这一点，我们可以使用uni.uploadFile API。假设我们有一个服务端接口可以处理视频上传请求。

methods: {
  // chooseVideo 方法保持不变
  uploadVideo() {
    if (!this.videoPath) return;

    uni.uploadFile({
      url: 'https://yourserver.com/upload', // 上传接口地址
      filePath: this.videoPath,
      name: 'file', // 文件对应的参数名
      header: {
        'Content-Type': 'multipart/form-data' // 设置内容类型
      },
      success: (uploadFileRes) => {
        uni.showToast({
          title: '视频上传成功',
          icon: 'success'
        });
        console.log('upload success:', uploadFileRes);
      },
      fail: (error) => {
        uni.showToast({
          title: '视频上传失败',
          icon: 'error'
        });
        console.error('upload error:', error);
      }
    });
  }
}

在uploadVideo方法中，我们调用uni.uploadFile，需要指定上传的URL以及文件路径等信息。上传成功或失败后，都要及时通知用户。

后端处理

假设您使用的是Node.js作为后端，可以使用Express框架配合multer库来处理文件上传。

const express = require('express');
const multer = require('multer');
const app = express();

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage });

app.post('/upload', upload.single('file'), (req, res) => {
  try {
    res.json({ message: 'Upload successful', file: req.file });
  } catch (error) {
    console.error('upload error:', error);
    res.status(500).send('Upload error');
  }
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上述代码中，我们使用multer中间件来解析文件上传请求，并将文件存储在uploads目录中。

通过结合UniApp的前端开发和Node.js的后端处理，我们可以顺利地实现视频上传功能。这种方案不仅适用于视频，还可以推广到图片、音频和其他文件类型的上传。经过实际测试，我们可以根据需要优化用户体验，比如添加视频预览、进度条等功能，从而提高应用的可用性。