uni-app 短视频上传工具

针对你提到的uni-app短视频上传工具的需求，以下是一个简单的实现思路和代码示例。这个示例将展示如何使用uni-app上传短视频文件到服务器。

实现思路

1. 选择视频文件：使用uni-app提供的文件选择器API让用户选择视频文件。
2. 上传视频文件：将选中的视频文件通过uni-app的上传API上传到服务器。

代码示例

1. 页面布局（pages/index/index.vue）

<template>
  <view class="container">
    <button @click="chooseVideo">选择视频</button>
    <video v-if="videoSrc" :src="videoSrc" controls></video>
    <progress v-if="uploadProgress > 0" :value="uploadProgress" max="100"></progress>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: '',
      uploadProgress: 0,
      tempFilePath: ''
    };
  },
  methods: {
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ['album', 'camera'],
        maxDuration: 60,
        success: (res) => {
          this.tempFilePath = res.tempFilePath;
          this.videoSrc = res.tempFilePath;
        }
      });
    },
    uploadVideo() {
      if (!this.tempFilePath) return;

      uni.uploadFile({
        url: 'https://your-server-url/upload', // 替换为你的服务器上传接口
        filePath: this.tempFilePath,
        name: 'file',
        formData: {
          user: 'test'
        },
        success: (uploadFileRes) => {
          console.log('上传成功', uploadFileRes);
        },
        fail: (err) => {
          console.error('上传失败', err);
        },
        complete: (res) => {
          this.uploadProgress = 0; // 重置进度条
        },
        onProgressUpdate: (res) => {
          this.uploadProgress = Math.round((res.progress / 100) * 100);
        }
      });
    }
  },
  onLoad() {
    // 页面加载时监听上传按钮点击事件（这里为了简化，直接在按钮上绑定了事件）
    // 如果需要更复杂的逻辑，可以在onLoad里设置监听器
  }
};
</script>

<style>
/* 添加一些简单的样式 */
.container {
  padding: 20px;
}
button {
  margin-bottom: 20px;
}
video {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
}
</style>

说明

• chooseVideo方法用于让用户选择视频文件，并显示预览。
• uploadVideo方法用于将选中的视频文件上传到服务器。这里使用了uni.uploadFileAPI，并处理了上传进度。
• 请注意，你需要将url替换为你自己的服务器上传接口地址。
• onProgressUpdate回调用于更新上传进度，这里简单地将进度值绑定到了一个<progress>元素上。

这个示例展示了基本的短视频上传功能，你可以根据实际需求进行扩展和优化。