【UNIAPP】上传视频，进度条的前台与后端

大佬教程收集整理的这篇文章主要介绍了【UNIAPP】上传视频，进度条的前台与后端，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

#  UNIAPP 页面<template>
    <view>

        <!-- 选择框 -->
        <view style="display: flex;flex-direction: row;justify-content: center;margin-top: 40px;" @click="SELEct">
            <u-circle-progress active-color="#2979ff" percent="100" duration="100">

                <view>
                    <image src="@/static/up.png" style="width: 40px;height: 40px;"></image>
                </view>

            </u-circle-progress>
        </view>

        <!-- 进度条 -->
        <view class="uni-padding-wrap uni-common-mt" style="margin-top: 30px;" >
            <view>
                
                <progress  :percent="percent" stroke-width="20" show-info border-radius="20"  />
                
            </view>
        </view>

        <!-- 表单 -->
        <view style="margin-top: 40px;">
            <view>
                <view>视频标题</view>
                <input placeholder="请输入标题" name="input" v-model="title"></input>
                <text class='cuIcon-title text-orange' style="font-size: 25px;"></text>
            </view>

            <view class="cu-form-group margin-top">
                <view>视频分类</view>
                <picker @change="PickerChange" :value="index" :range="picker">
                    <view>{{index>-1?picker[index]:'请选择分类'}}</view>
                </picker>
            </view>

        </view>

        <!-- 下单按钮 -->
        <view class="padding flex flex-direction" style="margin-top: 20px;">
            <button class="cu-btn bg-blue margin-tb-sm lg" @click="release_task">发布</button>
        </view>

        <!-- 提醒 -->
        <view>
            <u-toast ref="uToast" />
        </view>

        <!-- 上传成功 -->

    </view>
</template>

<script>
    /* 导入 */import config from "@/common/config.js";

    var _self;
    export default {
        data() {return {/* 上传LOGO */src: "/static/up.png",/* 视频文件 */file: "",

                title: "",/* 进度条 */percent: 0,
                jianjian: 0,
                loading: false,
                disabled: false,

                picker: ['音乐', '生活', '影视', '舞蹈', '游戏', '美食', ],
                index: -1,
            }
        },
        computed: {

        },
        onLoad() {

        },
        methods: {/* 提示 */uToast() {

                uni.showModal({
                    title: '消息提示',
                    content: '上传成功',
                    showCancel: false,
                    confirmText: "我知道了",
                    success: function(res) {

                    }
                });
            },/* 选择视频 */SELEct() {
                _self = this;
                uni.chooseVideo({
                    count: 1,
                    maxDuration: 60,
                    sourceType: ['camera', 'album'], //从选择

                    success: function(res) {// 临时文件
                        _self.src = res.tempFilePath
                    },
                    error: function(E) {
                        console.log(E);
                    }
                });
            },/* 品牌选择 */PickerChange(E) {
                this.index = e.detail.value
            },/* 上传 */release_task() {

                _self = this;// const tempFilePaths = res.tempFilePaths;
                const uploadTask = uni.uploadFile({// url: 'https://demo.hcoder wangt.cc /index.php?c=uperTest',
                    url: config.ipConfig + '/api/upload/video',

                    filePath: _self.src,
                    name: 'file',
                    formData: {'username_id': 1},

                    success: function(uploadFileRes) {
                        _self.uToast()

                    }
                });

                uploadTask.onProgressupdate(function(res) {
                    _self.percent = res.progress;
                });

            }
        },
    }</script>

<style scoped>.u-progress-content {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .u-progress-dot {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        BACkground-color: #fb9126;    }

    .u-progress-info {
        font-size: 28rpx;
        padding-left: 16rpx;
        letter-spacing: 2rpx
    }</style>
 
# upload_files.py 返上传状态 与 存放地址"""上传文件　　UploadFiles（用户名,功能名，图片对象,编号ID）"""import traceBACkimport osfrom utils import datamd5# 获取相对路径BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))def UploadVideo(username,function,files):try:# 上传路径dir_path = BASE_DIR + "/media/{}/{}/".format(function,userName)# 后缀名head_suffix = files.name.split(".")[1]# 如果没有这个路径就创建if not os.path.exists(dir_path):
            os.makedirs(dir_path)
        path=''# 为了避免覆盖　对名字进行加密file_name = datamd5.md5(files.name) + "." + head_suffix

        with open(dir_path + file_name, 'wb') as dest:# 获取路径path = path + '/media/{}/{}/'.format(function,userName) + file_namefor chunk in files.chunks():
                dest.write(chunk)return True,pathexcept:# print(traceBACk.format_exc())return false,None
# 上传接口 upload_video.py# -*- coding: UTF-8 -*-import osimport traceBACkfrom rest_framework.views import APIViewfrom database import modelsfrom django.http import JsonResponseimport datetiR_73_11845@eimport timefrom utils import upload_files

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))class ReleaseVideo(APIView):def post(self,request):

        message = {}try:# 对象file_obj = request.FILEs.get('file', NonE)

            username_id = request.data.get("username_id")

            function = 'upload_video'# 上传status,path = upload_fileS.UploadVideo(username_id, function, file_obj)if status == false:
                message["code"] = 10041message["message"] = "上传失败"return JsonResponse(messagE)

            message["code"] = 200message["message"] = "发布成功"return JsonResponse(messagE)except:# print(traceBACk.format_exc())message["code"] = 10044message["message"] = "发布失败"return JsonResponse(messagE)

大佬总结

以上是大佬教程为你收集整理的【UNIAPP】上传视频，进度条的前台与后端全部内容，希望文章能够帮你解决【UNIAPP】上传视频，进度条的前台与后端所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。