当前位置:   article > 正文

uniapp上传视频_uniapp 上传视频

uniapp 上传视频
  1. <u-form-item label="上传视频">
  2.     <view class="add_picture">
  3.         <view class="many_photo" v-show="addVideo">
  4.             <image src="@/static/upload.png" @click="test"></image>
  5.         </view>
  6.         <view class="" v-show="showVideo" style="position: relative;">
  7.             <video :src="src" style="video; width: 320rpx; height: 220rpx;"></video>
  8.             <image src="@/static/close.png"
  9.                 @click="DelImg" class="close-img"
  10. style="height: 36rpx;"></image>
  11.         </view>
  12.     </view>
  13. </u-form-item>
  1. export default {
  2.     data() {
  3.         return {
  4.             src: '',
  5.             showVideo: false,
  6.             addVideo: true,
  7.         }
  8.     },
  9.     methods: {
  10.         // 点击上传视频
  11.         test: function() {
  12.             var self = this;
  13.             uni.chooseVideo({
  14.                 count: 1,
  15.                 sourceType: ['camera', 'album'],
  16.                 success: function(res) {
  17.                     console.log("选择视频成功", res)
  18.                     self.showVideo = true
  19.                     self.addVideo = false
  20.                     self.src = res.tempFilePath;
  21.                     uni.uploadFile({
  22.                         // 需要上传的地址
  23.                         url: '接口地址', //接口地址
  24.                         // filePath 需要上传的文件
  25.                         filePath: self.src,
  26.                         name: 'file',
  27.                         header: {
  28.                             'token': self.userInfo.token, // from data
  29.                         },
  30.                     });
  31.                 }
  32.             });
  33.         },
  34.         //右上角删除视频
  35.         DelImg() {
  36.             this.src = '',
  37.             this.showVideo = false,
  38.             this.addVideo = true
  39.         },
  40.     }
  41. }

目前只能上传一个视频

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号