七牛sdk 上传视频

七牛地址

前端接入地址：JavaScript SDK
具体的引用方式看情况而定

干货来了

首先我们渲染上传标签

<inputref={input => (this.fileSelectorInput = input)}type="file"className={styles["input"]}accept="video/*, image/*, mtvideo/9, mtimage/9"onChange={this.onFileChange}/>

上传的时候，我们可以通过 this.fileSelectorInput 拿到当前上传视频（图片）的数组，进行前置校验，是否符合尺寸，大小标准。

onFileChange = async e => {let fileSelectorEl = this.fileSelectorInput;let { mediaSize } = this.props;const { isVideo } = this.state;if (fileSelectorEl && fileSelectorEl.files && fileSelectorEl.files.length) {// 保存所有的复合校验逻辑的文件const allFiles = [];if (!mediaSize) {mediaSize = isVideo ? 50 : 5;}for (let index = 0; index < fileSelectorEl.files.length; index++) {const file = fileSelectorEl.files[index];const isLt = file.size / 1024 / 1024 <= mediaSize;if (!isLt) {message.error(`上传文件大小不得超过${mediaSize}M`);return false;}if (!isVideo) {try {// 校验尺寸await this.handleBeforeUploadSize(file);allFiles.push(file);} catch (_err) {message.error("上传图片尺寸不合适");}} else {allFiles.push(file);}}if (!allFiles.length) return;const newFiles = this.parseFile(allFiles[0], 0);Promise.all([newFiles]).then(imageItems => {return this.addImage(imageItems);})["catch"](error => {console.log("err", error);});}};

校验尺寸需要返回信息，且是异步的，需要使用Promise，但是视频格式校验尺寸比较复杂，因此只做了图片的校验，

// 校验图片的大小handleBeforeUploadSize = file => {const {width,height,minHeight,minWidth,maxHeight,maxWidth} = this.props;if (width || height || minHeight || minWidth || maxHeight || maxWidth) {return new Promise((resolve, reject) => {const filerender = new FileReader();filerender.onload = e => {const base64Url = e.target.result;const img = new window.Image();img.onload = () => {const w = img.width;const h = img.height;let flag = true;if ((width && w != width) ||(minWidth && w < minWidth) ||(maxWidth && w > maxWidth) ||(height && h != height) ||(minHeight && h < minHeight) ||(maxHeight && h > maxHeight)) {flag = false;}flag ? resolve(true) : reject();};img.src = base64Url;img.onerror = () => resolve(true);};filerender.readAsDataURL(file);});} else {return Promise.resolve(true);}};

一下两个函数，是处理上传文件之前，需要展示的图片转为base64，这样可以预览文件，上传的时候不会展示为空

parseFile = (file, index) => {return new Promise((resolve, reject) => {let reader = new FileReader();reader.onload = e => {let dataURL = e.target.result;if (!dataURL) {reject("Fail to get the " + index + " image");return;}let orientation = 1;this.getOrientation(file, res => {// -2: not jpeg , -1: not definedif (res > 0) {orientation = res;}resolve({url: dataURL,orientation: orientation,file: file});});};reader.readAsDataURL(file);});};getOrientation = (file, callback) => {let reader = new FileReader();reader.onload = e => {let view = new DataView(e.target.result);if (view.getUint16(0, false) !== 0xffd8) {return callback(-2);}let length = view.byteLength;let offset = 2;while (offset < length) {let marker = view.getUint16(offset, false);offset += 2;if (marker === 0xffe1) {let tmp = view.getUint32((offset += 2), false);if (tmp !== 0x45786966) {return callback(-1);}let little = view.getUint16((offset += 6), false) === 0x4949;offset += view.getUint32(offset + 4, little);let tags = view.getUint16(offset, little);offset += 2;for (let i = 0; i < tags; i++) {if (view.getUint16(offset + i * 12, little) === 0x0112) {return callback(view.getUint16(offset + i * 12 + 8, little));}}} else if ((marker & 0xff00) !== 0xff00) {break;} else {offset += view.getUint16(offset, false);}}return callback(-1);};reader.readAsArrayBuffer(file.slice(0, 64 * 1024));};

校验通过，就需要去执行七牛上传，核心就三步，qiniu.upload，observable，上传的回调，
七牛上传前端需要后续处理逻辑的token，这个token可以从服务端去拿，或者从node层做处理

uploaded字段是否上传成功的标识。

addImage = async resItems => {const { fileList, isVideo } = this.state;await this.setState({ fileList: fileList.concat(resItems) });const requests = isVideo ? Api.getMediaToken : Api.getImgToken;requests().then(token => {if (token) {resItems.forEach(item => {let file = item.file;let next = response => {let total = response.total;console.log("进度：" + ":" + total.percent + "% ");};let error = err => {console.log("err", err.message);message.error(err.message);};// 成功回调let complete = res => {if (res?.out?.key) {const url = `http://xxx.com/${res?.out?.key}`;item.uploaded = true;item.remoteUrl = url;// 利用堆栈，这样不用一直操作数据this.setState({ fileList: [...this.state.fileList] }, () => {this.formatFiles();});}};// 调用sdk上传接口获得相应的observable，控制上传和暂停let observable = qiniu.upload(file, null, token);const subscription = observable.subscribe(next, error, complete);// 上传过程中 删除的时候，需要取消上传item.subscription = subscription;});}});};

删除图片，这时候只需要清除上传动作就行

// 删除主要是利用了堆栈原理，removeImage = (index, event) => {const { fileList } = this.state;const newRes = [];fileList.forEach((file, idx) => {if (index !== idx) {newRes.push(file);} else {file.subscription && file.subscription.unsubscribe();}});this.setState({fileList: newRes},() => {this.formatFiles();});event.stopPropagation();};

整个流程就结束了，但是还有预览图片，这时候写个弹窗就行。欢迎留言讨论

写一篇有用的文章不容易欢迎打赏与讨论

七牛sdk 上传视频 - 前端相关推荐

html5七牛图片上传js,前端如何上传图片至七牛云
上传文件是我们在前端开发中经常遇到的一个问题.最近在做某项目管理后台的时候,需要将轮播图上传至七牛云.以前在Vue里面做过类似的功能,但是在Angular中使用同样的方法发现行不通. 此篇文章主要介绍 ...
php七牛分片上传_七牛视频切片方案 - 张小超fly的个人空间 - OSCHINA - 中文开源技术交流社区...
使用七牛 sdk 上传视频并做分片操作. step1 生成 token const qiniu = require("qiniu"); var accessKey = proc.e ...
ASP.NET Core 简单实现七牛图片上传（FormData 和 Base64）
ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...
android 队列上传图片,话说android端七牛图片上传
七牛图片上传业务流程如下图(这是官方的图): 由上图可知,要想实现图片上传,是要三端进行交互的(我刚刚开始以为只要七牛服务器跟客户端交互就行) 接下来步骤如下: 1.首先肯定是要有一个七牛的账号,并创 ...
七牛图片上传的使用心得[PHP篇]
曾写过一篇文章随便写了写我怎么用七牛的,发现很多小伙伴来问我,这回写个详细的. 前提: 1.已经有七牛账号,创建了空间,能看到AccessKey/SecretKey: 2.你知道怎么用composer ...
话说android端七牛图片上传
七牛图片上传业务流程如下图(这是官方的图): 由上图可知,要想实现图片上传,是要三端进行交互的(我刚刚开始以为只要七牛服务器跟客户端交互就行) 接下来步骤如下: 1.首先肯定是要有一个七牛的账号,并创 ...
计划用php写一个七牛文件上传小工具
为什么80%的码农都做不了架构师?>>> 功能输入框中填入:bucket Access Key 和 Secret Key 点击提交后,向七牛服务器认证,若认证通过,则在当 ...
七牛HTML 上传按钮,七牛 JSSDK 配置＋常见问题
作者:娇娇jojo 时间:2018年6月19日一.铺垫依靠七牛上传图片,其实有很多方法,先说说有哪些方法,以及这些方法各自的优缺点吧(移动端). way1:前端只负责选择图片,然后将图片传给服务端 ...
Windows平台七牛批量上传工具使用教程
因为原有的图形工具被废弃了,所重新找了个命令行工具(qshell) 1. 先去官网 https://developer.qiniu.com/kodo/tools/1302/qshell 下载该执行文 ...
Android 调用优酷SDK上传视频
最近在研究用优酷的SDK来进行视频上传的功能,由于优酷的SDK只是提供了一个上传的sample code,没有涉及到授权的过程,对于新手来说,可能非常棘手,现在分享一下我的思路: 程序实现前我们先要到 ...

七牛sdk 上传视频 - 前端

七牛地址

七牛sdk 上传视频 - 前端相关推荐

最新文章

热门文章