uniapp 微信小程序视频上传功能

Uniapp支持小程序的视频上传功能，可以通过uni.uploadFile()方法实现。以下是一个示例代码：

uni.chooseVideo({
  sourceType: ['album', 'camera'],
  compressed:true,
  success: function (res) {
    uni.showLoading({
      title: '上传中'
    })
    uni.uploadFile({
      url: '上传接口地址',
      filePath: res.tempFilePath,
      name: 'file',
      formData: {
        'user': 'test'
      },
      success: function (res) {
        uni.hideLoading()
        console.log(res.data)
      },
      fail: function (res) {
        uni.hideLoading()
        console.log(res)
      }
    })
  }
})

其中，uni.chooseVideo()方法用于选择视频，uni.uploadFile()方法用于上传视频。需要注意的是，上传接口地址需要根据自己的实际情况进行修改。

相关问题

uniapp 微信小程序视频上传功能 完整代码

以下是一个基于 uniapp 和微信小程序平台的视频上传功能的完整代码示例：

<template>
  <view>
    <button @tap="chooseVideo">选择视频</button>
    <video :src="videoSrc" controls></video>
    <button @tap="uploadVideo">上传视频</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        videoSrc: '', // 视频的临时路径
        videoFileId: '' // 视频文件在云存储中的文件 ID
      }
    },
    methods: {
      chooseVideo() {
        wx.chooseVideo({
          sourceType: ['album', 'camera'], // 视频选择的来源
          maxDuration: 60, // 视频的最大时长，单位秒
          camera: 'back', // 默认摄像头为后置摄像头
          success: res => {
            this.videoSrc = res.tempFilePath // 将选择的视频路径保存到 data 中
          },
          fail: err => {
            console.log(err)
          }
        })
      },
      uploadVideo() {
        // 上传视频文件到云存储
        wx.cloud.uploadFile({
          cloudPath: 'videos/' + Date.now() + '.mp4', // 文件在云存储中的路径，使用时间戳防止重复
          filePath: this.videoSrc, // 要上传的视频文件的临时路径
          success: res => {
            this.videoFileId = res.fileID // 保存上传后的视频文件的文件 ID
            console.log('上传成功：', res)
          },
          fail: err => {
            console.log('上传失败：', err)
          }
        })
      }
    }
  }
</script>

需要注意的是，上传视频文件到云存储需要先在小程序后台开通云开发功能，并且需要在 uniapp 的 `manifest.json` 文件中配置云开发环境 ID，具体方式可参考 uniapp 官方文档或小程序官方文档。此外，视频文件上传到云存储后，还需要使用云函数等方式将视频文件的文件 ID 存储到数据库中，以供后续使用。

uniapp微信小程序裁剪头像功能

Uniapp的微信小程序中，实现裁剪头像功能可以使用uni-image-cropper组件。

1. 安装组件

在Uniapp项目的根目录下，打开命令行窗口，输入以下命令安装uni-image-cropper组件。

npm install uni-image-cropper --save

2. 引入组件

在需要使用裁剪头像功能的页面中，引入uni-image-cropper组件。

<template>
  <view class="container">
    <uni-image-cropper :src="src" :aspectRatio="1" @cropperdone="onCropperDone"></uni-image-cropper>
  </view>
</template>

<script>
import uniImageCropper from '@/components/uni-image-cropper/uni-image-cropper.vue'

export default {
  components: {
    uniImageCropper
  },
  data() {
    return {
      src: ''
    }
  },
  methods: {
    onCropperDone(base64) {
      // 处理裁剪后的图片
    }
  }
}
</script>

3. 使用组件

在需要裁剪头像的时候，设置图片的src属性为需要裁剪的图片地址。

this.src = 'https://example.com/image.jpg'

在用户完成裁剪后，组件会触发cropperdone事件，将裁剪后的图片以base64格式传递给回调函数。在回调函数中，可以对裁剪后的图片进行处理，例如上传到服务器或保存到本地。

onCropperDone(base64) {
  // 处理裁剪后的图片
  console.log(base64)
}

4. 自定义样式

uni-image-cropper组件支持自定义样式，可以根据需要在页面中添加样式。

.container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0,0,0,0.5);
}

.uni-image-cropper {
  width: 100%;
  height: 80%;
}

.uni-image-cropper .uni-image-cropper-canvas {
  border: 2px solid #fff;
}

通过设置容器的宽度和高度为100%，使组件覆盖整个页面；设置背景色为半透明的黑色，增强遮罩效果。

通过设置uni-image-cropper组件的宽度为100%、高度为80%，使其在页面中居中显示。

通过设置.uni-image-cropper-canvas的边框为2px白色实线，增强裁剪框的可见性。