关键词：
<div class="form-group"> <label>上传视频：</label> <div class="my-upload"> <div class=""> <input type="file" id="fileupload" name="fileupload" class="" /> </div> </div> </div> <div style="padding-top: 30px; padding-left: 283px;"> <video src="@Html.ValueFor(c => c.VedioLink)" id="vediofile" style="width:400px;height:250px;" controls="controls"> </video> </div> @Html.HiddenFor(c => c.VedioLink, new { @id = "vedio" }) <span style="margin-left: 20%;" id="progress" >上传进度：0%</span>
<script> //上传视频 $(‘input[name=fileupload]‘).change(function () { //console.log("in it"); layer.msg(‘上传视频中...请不要关闭或刷新页面...‘) var formData = new FormData($("#uploadForm")[0]); var xhr = new XMLHttpRequest(); var url = "/Console/UploadVedio/Indexs"; xhr.open("POST", url, true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); var returndata = eval("(" + xhr.responseText + ")"); console.log(returndata.datas); if (returndata.status == 1) { layer.msg(returndata.msg); } else { layer.msg(returndata.msg); $("#vediofile").attr(‘src‘, returndata.datas) $("#vediofile2").attr(‘src‘, returndata.datas) $("#vedio").val(returndata.datas); } } }; //进度条部分 xhr.upload.onprogress = function (evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); if (percentComplete==100) { document.getElementById(‘progress‘).innerHTML = "上传进度完成！正在进行保存操作，提示上传成功之前，请不要关闭和刷新页面！"; } else { document.getElementById(‘progress‘).innerHTML = "上传进度：" + percentComplete + "%"; } } }; xhr.send(formData); }); </script>
这里使用了XMLHttpRequest 进行视频的上传
使用 XMLHttpRequest .upload.onprogress 显示上传进度
后台的接收代码
[HttpPost] public ActionResult Indexs(FormCollection collection) { HttpPostedFileBase file = HttpContext.Request.Files[0]; if (file != null) { if (file.FileName.Length > 2 && fileName.ToLower().IndexOf(".mp4") < 0) { return WriteError("请上传.MP4格式的视频"); } } string fileName = GetFileName(file.FileName);// GetFileName(); string saveName = DateTime.Now.ToString("yyyyMMddHHmmssffff") + fileName; string playFile = Server.MapPath(PublicMethod.upFile + saveName); string upFileName = PublicMethod.upFile + saveName; //上传视频到本地 file.SaveAs(playFile); //将视频上传到七牛 qiniufun.PutFile(qiniufun.qnSpace, qiniufun.fullname(upFileName), Server.MapPath(upFileName)); } public string GetFileName(string fileName) { int i = fileName.LastIndexOf("\") + 1; string Name = fileName.Substring(i); return Name; }
上传到七牛过程中发生如下问题
1.使用普通上传方式只能上传文件大小于100M以内的视频
说到这个问题要吐槽一下七牛的sdk ，在nuget下载下来的dll和官方文档上面的示例代码方法名和方法很多都对不上。
2.上传的视频无法在PC端和手机端同时播放正常
对于上面的这个问题七牛有个小技巧可以查看视频的编码
http://7xo9nf.com2.z0.glb.qiniucdn.com/test.mp4?avinfo//视频地址+？avinfo
解决方案：使用格式工厂将视频的编码改成AVC(H262) 或者ACV（H264）编码即可
好了解决上述问题之后发现把代码发布到iis环境代码又有如下问题
1.MP4格式的文件iis无法识别
添加视频的mime类型即可 .mp4 video/mp4
2.上传文件夹访问权限问题
3.iis 上传文件大小限制
选中网站主页-》请求筛选-》编辑功能设置-》设置允许最大内容长度
4.请求的时间限制
webconfig设置还有XMLHttpRequest 设置
php上传文件与图片到七牛的实例详解(代码片段)
上传文件到七牛最简单的方式就是使用七牛官方最新的SDK用composer安装PHPSDKcomposer require qiniu/php-sdk 上传文件到七牛use QiniuAuth;use QiniuStorageUploadManager;$cfg = [ ‘access‘ =>&nb 查看详情
安卓批量上传图片到七牛的两种方法
...自己拼接key最后是时间戳加上图片的下标，不然容易因为上传时间过快导致时间戳一样，造成上传失败。当初写iOS上传自己拼接key的时候遇到过这个问题。创建一个工具类QiNiuUploadUtil，初始化七牛的上传工具类UploadManager然后创... 查看详情
ueditor1.4.3php如何上传图片到图片服务器（七牛）
在guthub上找到一个实例，但不知道为啥批量上传可以上传到七牛，但单图就还是传到自己的服务器了，而且没有改图片名字。https://github.com/widuu/qiniu_ueditor_1.4.3想知道该如何修改，或者能不能不用他给的上传类而用我自己写的上... 查看详情
七牛镜像存储wordpress插件的使用
...镜像存储WordPress插件 下载七牛镜像存储WordPress插件，上传激活，然后在WordPress后台>七牛镜像存储>基本设置，输入你前面绑定的域名(注意输入的域名一定要加上http://)： 七牛镜像存储WordPress插件高级用法 除了将... 查看详情
ueditor上传图片到七牛云存储（formapi,java）
转：http://my.oschina.net/duoduo3369/blog/174655ueditor上传图片到七牛云存储ueditor结合七牛传图片七牛的试炼开发前的准备与注意事项说明Let‘srock与ueditor结合前的准备工作首先从表单开始生成token建立图片空间生成token上传流程集成ueditor... 查看详情
如何将图片上传到七牛云平台？
参考技术A上一篇文章介绍了“如何将图片上传到Cloudinary云平台？”但是由于Cloudinary的服务器在国外，所以上传和读取图片的速度会很慢，不适合用作生产，因此有必要再介绍一下国内广受欢迎的“七牛”云平台。以及分步骤给... 查看详情
vue3+typescript上传文件到七牛云
.../detail/21414BX0Uleafage-ms项目写了很久了，但是一直没有完成上传文件的功能，之前看了几次七牛云的文档，折腾了几次，没有成功，今天下了决心必须解决这个问题就又开始了各种找资料，看文档，看示例，终于搞定了。项目中使... 查看详情
七牛上传视频并转码
///<summary>///上传视频到七牛并转码///</summary>///<paramname="saveKey"></param>///<paramname="localFile"></param>publicstaticvoidUpLoadVideo(stringsaveKey,stringlocalFile){M 查看详情
springboot上传文件到七牛云
准备工作mavenpom.xml添加七牛云的sdk依赖<dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>7.2.27</version></dependency>配置项七牛云上传 查看详情
thinkphp6上传图片七牛云如何上传文件到七牛云对象储存cos
参考技术AThinkPHP6如何上传图片七牛云,如何上传文件到七牛云对象储存cos,总所周知图片是特别消耗网站带宽的,个人网站将图片上传至七牛云才能显著提升网站的响应速度,手把手交大家如何上配置ThinkPHP6上传文件至七牛云.然后我... 查看详情
上传base64图片到七牛云前端遇到的坑
介意前端普通引入七牛云SDk上传图片到七牛云需要多个js，所以才有了base64的上传方式，简化操作，（懒。）七牛云官方文档如下https://developer.qiniu.com/kodo/kb/1326/how-to-upload-photos-to-seven-niuyun-base64-code 我们前端理所当然就... 查看详情
前端上传图片头像到七牛云格式变成text
参考技术A流程：七牛云后台的对象存储功能，nodejs后台生成七牛云的token，前端利用elementUI/ice的upload组件，文件名和token作为参数请求到七牛云后台。配置已经完成，写接口用的是express，koa同理，主要做法是先接收前端的图片... 查看详情
文件流数组上传到七牛云
首先要注册七牛云，申请个空间，获得密钥、等东西，引入官方sdk包，然后再开发文档中找到代码copy进去就可以了。因为非常简单，我就直接弄上代码了。1packagecom.qianmo.foru.bean.request;23importcom.qianmo.core.common.CommonRequest;4importorg.hi... 查看详情
微信小程序上传图片及上传到上传到七牛云(代码片段)
微信小程序图片上传功能包含：上传到七牛云、删除图片、查看图片 1.创建子组件tpupload//wxml文件<viewstyle="padding:10px;"><!--图片上传--><viewclass="weui-uploader"><viewclass="img-vweui-uploader__bd">< 查看详情
canvas保存图片到七牛云(代码片段)
最近在做一个项目，需要在前端对图片切片并上传到七牛云技术要点canvas.toBlob(blob=>);//可将canvas保存成二进制文件formData.append(‘file‘,blob,‘filename‘);//将二进制文件添加到FormData中ajax.send(formData);//上传数据到后端处理代码实... 查看详情
laravel上传到七牛图片插件(代码片段)
...字就叫qiniu.php，注意引入//引入鉴权类useQiniu\\Auth;//引入上传类 查看详情
fetch关于七牛的content-type的问题
七牛要的Content-Type:multipart/form-data;boundary=<frontier>；那个boundary（formdata分隔符）是浏览器自己加的，不用管 所以解决办法就是不要手动设置fetch的Content-Type，这样就没事了 我为这个竟然花了大半天，真是够了擦擦擦... 查看详情
小程序上传文件到七牛云
...160;) ,function() ) ,第二步：利用upfileAPI上传文件wx.uploadFile( formData:token:that.data.up_token,//这里是请求头部 查看详情