uni-app 上传视频功能实现

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app 上传视频功能实现

uniapp上传视频


| 类别       | 信息           |
|------------|----------------|
| 开发环境   | -               |
| 版本号     | -               |
| 项目创建方式 | -               |
Harmonyos Next教程
6 回复

专业团队承接双端（Android，iOS）原生插件开发，uni-app外包项目开发。
团队接受uni-app付费技术咨询，可远程调试。
联系QQ：1559653449


可以做，个人开发，便宜又划算。联系QQ：1804945430

代码类似这样 uni.chooseVideo({
count: 1,
sourceType: source_type,
success: function (res) {
const tempFilePaths = res.tempFilePath;
uni.uploadFile({
url: ‘上传地址’,
filePath: tempFilePaths,
name: ‘file’,
success: (uploadFileRes) => {

                        }  
                    })  
                }

});

好的，感谢

哈哈 视频的难点不是上传 而是视频的大小问题 https://ext.dcloud.net.cn/plugin?id=5941 这个插件带视频压缩 可以试用看看 压缩完了再上传就省事多了

在uni-app中实现视频上传功能，通常涉及前端页面布局、文件选择、文件上传及后端接口对接等步骤。以下是一个简化的代码案例，展示了如何在uni-app中实现视频上传功能。

前端部分

1. 页面布局

在pages/upload/upload.vue文件中，创建一个简单的页面布局，包含一个视频选择按钮和一个上传按钮。

<template>
  <view class="container">
    <button @click="chooseVideo">选择视频</button>
    <video :src="videoSrc" controls v-if="videoSrc"></video>
    <button @click="uploadVideo" v-if="videoSrc">上传视频</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: ''
    };
  },
  methods: {
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ['album', 'camera'],
        maxDuration: 60,
        camera: 'back',
        success: (res) => {
          this.videoSrc = res.tempFilePath;
        }
      });
    },
    uploadVideo() {
      const filePath = this.videoSrc;
      uni.uploadFile({
        url: 'https://your-backend-server.com/upload', // 替换为你的后端接口
        filePath: filePath,
        name: 'file',
        formData: {
          user: 'test'
        },
        success: (uploadFileRes) => {
          console.log('上传成功：', uploadFileRes.data);
        },
        fail: (err) => {
          console.error('上传失败：', err);
        }
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
</style>

后端部分

后端需要处理文件上传请求，并保存文件到服务器。以下是一个简单的Node.js + Express示例，用于处理视频上传。

const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const port = 3000;

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

const upload = multer({ storage: storage });

app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.file); // 上传的文件信息
  res.send('文件上传成功');
});

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

总结

以上代码展示了如何在uni-app中实现视频选择、预览和上传功能，以及如何在后端使用Node.js和Express处理文件上传请求。请根据实际情况调整代码，特别是后端接口地址和文件存储路径。此外，考虑到生产环境的安全性，建议添加必要的验证和错误处理机制。

回到顶部