.net阿里云视频上传，搭建服务器Web端JavaScrpt上传视频信息_createuploadvideorequest

参考 https://help.aliyun.com/document_detail/72085.html?spm=a2c4g.11186623.6.961.418958fcKLHJgt

添加包

1、服务端提供接口 控制器ApiVideo下方法

AccessKeyID和AccessKeySecret在阿里云账户子用户里获取

    /// 视频上传地址和凭证接口
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public ActionResult CreateUploadNewsVideo(Guid NID,string Title, string FileName)
        {
            // 构造请求
            CreateUploadVideoRequest request = new CreateUploadVideoRequest
            {
                Title = Title, //UTF8编码
                FileName = FileName//必须带扩展名，且扩展名不区分大小写
            };
            // 初始化客户端  
            DefaultAcsClient client = InitVodClient("AccessKeyID","AccessKeySecret" );
            // 发起请求，并得到响应结果
            CreateUploadVideoResponse response = client.GetAcsResponse(request);
            string VideoId = response.VideoId;
            //获取播放地址
            string VideoUrl = GetVideoUrl(VideoId);
            //修改视频路径
            IAppVideo.News_Update_Video(NID, Title, VideoUrl);
            //修改上传视频路径信息
            return Content(response.ToJson());
        }

        //根据videoId获取上传视频的播放路径
        private string GetVideoUrl(string videoId)
        {
            // 构造请求
            GetPlayInfoRequest request = new GetPlayInfoRequest();
            request.VideoId = videoId;
            // request.AuthTimeout = 3600;
            // 初始化客户端 
            DefaultAcsClient client = InitVodClient("AccessKeyID","AccessKeySecret");
            // 发起请求，并得到 response
            GetPlayInfoResponse response = client.GetAcsResponse(request);
            Console.WriteLine("RequestId = " + response.RequestId);
            Console.WriteLine("VideoBase.Title = " + response.VideoBase.Title);
            List<GetPlayInfoResponse.GetPlayInfo_PlayInfo> playInfoList = response.PlayInfoList;
            string PlayURL = "";
            foreach (var playInfo in response.PlayInfoList)
            {
                PlayURL = PlayURL + playInfo.PlayURL;
            }
            return PlayURL;
        }
        /// <summary>
        /// 如果videoId有值，根据videoId刷新上传凭证
        /// </summary>
        /// <param name="Title"></param>
        /// <param name="FileName"></param>
        /// <returns></returns>
        [HttpGet]
        public ActionResult RefreshUploadVideo(string VideoId)
        {
            // 构造请求
            // 构造请求
            RefreshUploadVideoRequest request = new RefreshUploadVideoRequest();
            request.VideoId = VideoId;
            // 初始化客户端 
            DefaultAcsClient client = InitVodClient("AccessKeyID","AccessKeySecret");
            // 发起请求，并得到 response
            RefreshUploadVideoResponse response = client.GetAcsResponse(request);   
            return Content(response.ToJson());
        }

        /// <summary>
        /// 初始化VOD客户端
        /// </summary>
        /// <returns>The vod client.</returns>
        private static DefaultAcsClient InitVodClient(string accessKeyId, string accessKeySecret)
        {
            // 点播服务接入区域
            string regionId = "cn-shanghai";
            IClientProfile profile = DefaultProfile.GetProfile(regionId, accessKeyId, accessKeySecret); 
            return new DefaultAcsClient(profile);
        }

      2、Web端   javascript案例包在下面

https://help.aliyun.com/document_detail/61388.html#section-kou-oxc-s05下载sdk路径

  <tr>
                <th>* 视频名称</th>
                <td><input id="VideoTitle" name="VideoTitle" value="@Model.VideoTitle" class="form-control form-control-sm" required type="text" style="width:100%;" autocomplete="off" /></td>
                <th></th>
                <td></td>
            </tr>
            <tr>
                <th>视频上传</th>
                <td colspan="3">
                    <div class="upload">
                        <div>
                            <input type="file" id="fileUpload">
                            <label class="status">上传状态: <span id="status"></span></label>
                            <input type="text" id="region" value="cn-shanghai" style="display:none" />
                        </div>
                        <div class="upload-type">
                            <button id="authUpload" disabled="true">开始上传</button>
                            <button id="pauseUpload" disabled="true">暂停</button>
                            <button id="resumeUpload" disabled="true">恢复上传</button>
                            <span class="progressnew">上传进度: <i id="auth-progress">0</i> %</span>
                            <span></span>
                            @if (Model.VideoUrl != "")
                            {
                                <a href="@Model.VideoUrl">播放视频</a>
                            }
                        </div>
                    </div>
                </td>
            </tr>

3、https://127.0.0.1替换自己的服务器接口地址

<!--视频上传到阿里云--> 
<script>
    //兼容IE11
    if (!FileReader.prototype.readAsBinaryString) {
        FileReader.prototype.readAsBinaryString = function (fileData) {
            var binary = "";
            var pt = this;
            var reader = new FileReader();
            reader.onload = function (e) {
                var bytes = new Uint8Array(reader.result);
                var length = bytes.byteLength;
                for (var i = 0; i < length; i++) {
                    binary += String.fromCharCode(bytes[i]);
                }
                //pt.result  - readonly so assign binary
                pt.content = binary;
                pt.onload()
            }
            reader.readAsArrayBuffer(fileData);
        }
    }
    $(document).ready(function () {
        /**
         * 创建一个上传对象
         * 使用 UploadAuth 上传方式
         */
        function createUploader() {
            var uploader = new AliyunUpload.Vod({
                timeout:  60000,
                partSize: 1048576,
                parallel: 5,
                retryCount: 3,
                retryDuration:   2,
                region: $('#region').val(),
                userId:"1571363948573267",
                // 添加文件成功
                addFileSuccess: function (uploadInfo) {
                    console.log('addFileSuccess')
                    $('#authUpload').attr('disabled', false)
                    $('#resumeUpload').attr('disabled', false)
                    $('#status').text('添加文件成功, 等待上传...')
                    console.log("addFileSuccess: " + uploadInfo.file.name)
                },
                // 开始上传
                onUploadstarted: function (uploadInfo) {
                    // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
                    // 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
                    // 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
                    // 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
                    // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
                    // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)

                    if (!uploadInfo.videoId) {
                        var createUrl = 'https://127.0.0.1/ApiVideo/CreateUploadNewsVideo?NID=' + $('#NID').val() +'&Title=' + $('#VideoTitle').val() + '&FileName=' + uploadInfo.file.name
                        console.log(createUrl);
                        $.get(createUrl, function (data) {
                            console.log(data);
                            var uploadAuth = data.UploadAuth;
                            var uploadAddress = data.UploadAddress;
                            var videoId = data.VideoId;
                            console.log(uploadAuth, uploadAddress, videoId);
                            uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId);
                            console.log(uploadInfo);
                        }, 'json')
                        $('#status').text('文件开始上传...')
                        console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
                    }
                    else {
                        // 如果videoId有值，根据videoId刷新上传凭证
                        // https://help.aliyun.com/document_detail/55408.html?spm=a2c4g.11186623.6.630.BoYYcY
                        var refreshUrl = 'https://127.0.0.1/ApiVideo/RefreshUploadVideo?VideoId=' + uploadInfo.videoId
                        $.get(refreshUrl, function (data) {
                            var uploadAuth = data.UploadAuth
                            var uploadAddress = data.UploadAddress
                            var videoId = data.VideoId
                            uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
                        }, 'json')
                    }
                },
                // 文件上传成功
                onUploadSucceed: function (uploadInfo) {
                    console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
                    $('#status').text('文件上传成功!')
                },
                // 文件上传失败
                onUploadFailed: function (uploadInfo, code, message) {
                    console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
                    $('#status').text('文件上传失败!')
                },
                // 取消文件上传
                onUploadCanceled: function (uploadInfo, code, message) {
                    console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
                    $('#status').text('文件上传已暂停!')
                },
                // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
                onUploadProgress: function (uploadInfo, totalSize, progress) {
                    console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
                    var progressPercent = Math.ceil(progress * 100)
                    $('#auth-progress').text(progressPercent)
                    $('#status').text('文件上传中...')
                },
                // 上传凭证超时
                onUploadTokenExpired: function (uploadInfo) {
                    // 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
                    // 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
                    // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
                    $('#status').text('文件上传超时!')

                    let refreshUrl = 'https://127.0.0.1/ApiVideo/RefreshUploadVideo?VideoId=' + uploadInfo.videoId
                    $.get(refreshUrl, function (data) {
                        var uploadAuth = data.UploadAuth
                        uploader.resumeUploadWithAuth(uploadAuth)
                        console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
                    }, 'json')
                },
                // 全部文件上传结束
                onUploadEnd: function (uploadInfo) {
                    $('#status').text('文件上传完毕!')
                    console.log("onUploadEnd: uploaded all the files")
                }
            })
            return uploader
        }

        var uploader = null

        $('#fileUpload').on('change', function (e) {
            var file = e.target.files[0]
            if (!file) {
                alert("请先选择需要上传的文件!")
                return
            }
            var Title = file.name
            var userData = '{"Vod":{}}'
            if (uploader) {
                uploader.stopUpload()
                $('#auth-progress').text('0')
                $('#status').text("")
            }
            uploader = createUploader()
            // 首先调用 uploader.addFile(event.target.files[i], null, null, null, userData)
            console.log(uploader)
            uploader.addFile(file, null, null, null, userData)
            $('#authUpload').attr('disabled', false)
            $('#pauseUpload').attr('disabled', true)
            $('#resumeUpload').attr('disabled', true)
        })

        // 第一种方式 UploadAuth 上传
        $('#authUpload').on('click', function () {
            // 然后调用 startUpload 方法, 开始上传
            if (uploader !== null) {
                uploader.startUpload()
                $('#authUpload').attr('disabled', true)
                $('#pauseUpload').attr('disabled', false)
            }
        })

        // 暂停上传
        $('#pauseUpload').on('click', function () {
            if (uploader !== null) {
                uploader.stopUpload()
                $('#resumeUpload').attr('disabled', false)
                $('#pauseUpload').attr('disabled', true)
            }
        })

        $('#resumeUpload').on('click', function () {
            if (uploader !== null) {
                uploader.startUpload()
                $('#resumeUpload').attr('disabled', true)
                $('#pauseUpload').attr('disabled', false)
            }
        })

    })
</script>