需求后台由于现有的后台管理系统，上传的视频越来越大，上传视频很慢。后端小哥建议直接从前端上传视频或者其他文件存放在阿里云OSS。阿里云OSS阿里云OSS文档介绍，这里就不赘述了。安装一开始使用的是node版本的SDK。一开始使用的【nodejs版】代码如下asyncfunctionput(){try{letresult=awaitclient.put('qq.mp4',fileObj);控制台日志（结果）；}catch(err){console.log(keyObject.AccessKeyId);console.log(keyObject.AccessKeySecret);console.log(keyObject.SecurityToken);控制台日志（错误）；}}放（）;上传图片的时候没有翻车，但是上传超过30M就翻车了，在阿里云OSS后台查看文件大小为0KB本来想用fs模块操作文件，结果发现那个fs在浏览器端，不能用，所以放弃了nodejsSDK浏览器版。仔细查看文档，发现浏览器版SDK有片段上传文档，于是就采用了[browser]版本。使用浏览器版SDK支持分片上传，同时可以通过分片上传返回进度，做进度条提示，方便业务逻辑运行letossConfig={region:'oss-cn-hangzhou',//云账号AccessKey拥有所有API访问权限，建议遵循阿里云最佳安全实践，服务端使用RAM子账号或STS部署，客户端使用STS部署。accessKeyId:keyObject.AccessKeyId,accessKeySecret:keyObject.AccessKeySecret,stsToken:keyObject.SecurityToken,bucket:'wesmart-app'}lettempCheckpoint;//定义上传方法。asyncfunctionmultipartUpload(){try{//object-key可以自定义为文件名（如file.txt）或目录（如abc/test/file.txt）上传文件到当前Bucket或下Bucket指定的目录。letresult=awaitclient.multipartUpload('02',fileObj,{progress:function(p,checkpoint){//断点记录点，浏览器重启后无法直接继续上传，需要手动触发上传操作.临时检查点=检查点；控制台日志（p）；控制台日志（检查点）；},mime:'video/mp4'})}catch(e){console.log(e);}}client.multipartUpload方法first第一个参数是自定义上传文件的名称。建议使用时间戳作为后缀名，保证文件的唯一性，不会被覆盖。第二个参数是文件回调函数progress，可以查看上传进度和文件的相关信息。说明以上项目需要的对象字段可以通过阿里云后台OSS查看。在开发过程中，个人建议大家通过请求后台返回的相关键值来进行操作。上传代码时使用put请求，一开始会报错跨域问题，需要在阿里云OSS中配置允许请求设置ExresponseHeader为etagsourcecodeimportReact，{useState,useEffect}来自“反应”；从“axios”导入axios；constOSS=require('ali-oss');class示例扩展React.Component{state={count:0,keyObject:{},upfile:"",}componentDidMount(){this.getData();}getData(){让那个=这个；axios.get('获取keyId的接口地址').then(function(response){console.log(response);let{status,data}=response;if(status==200){that.setState({关键对象等：数据});}}).catch(function(error){console.log(error);});}handleUpload(){let{keyObject,upfile}=this.state;varfileObj=document.getElementById("file").files[0];控制台日志（文件对象）；控制台日志（keyObject）；letossConfig={region:'oss-cn-hangzhou',//云账号AccessKey拥有所有API访问权限，推荐遵循阿里云安全最佳实践，使用RAM子账号或者STS部署在服务器上，并且在客户端使用STS部署accessKeyId:keyObject.AccessKeyId,accessKeySecret:keyObject.AccessKeySecret,stsToken:keyObject.SecurityToken,bucket:'wesmart-app'}letclient=newOSS({region:'oss-cn-hangzhou',//云账号AccessKey拥有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或者STS，部署在客户端使用STS。accessKeyId:keyObject.AccessKeyId,accessKeySecret:keyObject.AccessKeySecret,stsToken:keyObject.SecurityToken,bucket:'wesmart-app'});//asyncfunctionput(){//try{//letresult=awaitclient.put('qq.mp4',fileObj);//控制台日志（结果）；//}catch(err){//console.log(keyObject.AccessKeyId);//console.log(keyObject.AccessKeySecret);//console.log(keyObject.SecurityToken);//控制台日志（错误）；//}//}//放（）;让临时检查点；//定义上传方法。asyncfunctionmultipartUpload(){try{//object-key可以自定义为文件名（如file.txt）或目录（如abc/test/file.txt）上传文件到当前Bucket或下Bucket指定的目录。letresult=awaitclient.multipartUpload('02',fileObj,{progress:function(p,checkpoint){//断点记录点，浏览器重启后无法直接继续上传，需要手动触发上传操作.临时检查点=检查点；控制台日志（p）；控制台日志（检查点）；},mime:'video/mp4'})}catch(e){console.log(e);}}//开始分段上传。多部分上传（）；//暂停分段上传。客户取消（）；//继续上传。letresumeclient=newOSS(ossConfig);asyncfunctionresumeUpload(){try{letresult=awaitresumeclient.multipartUpload('02',fileObj,{progress:function(p,checkpoint){tempCheckpoint=checkpoint;console.log(p);console.log(checkpoint);},检查点:tempCheckpoint,mime:'video/mp4'})}catch(e){console.log(e);}}resumeUpload();}handleChange(e){e.persist();this.setState({upfile:e.target.value});}render(){const{upfile}=this.state;返回(
