aliyunupload图片上传_使用JavaScript上传SDK

上传地址和凭证方式

说明 推荐使用上传地址和凭证方式进行初始化。

请求获取的上传地址和凭证初始化时无需设置,在上传开始后触发的onUploadStarted回调中调用setUploadAuthAndAddress(uploadFileInfo, uploadAuth, uploadAddress,videoId)方法进行设置。

当token超时,会触发onUploadTokenExpired回调,需要调用resumeUploadWithAuth(uploadAuth)方法,设置新的上传凭证继续上传。var uploader = new AliyunUpload.Vod({

//阿里账号ID,必须有值

userId:"122",

//分片大小默认1 MB,不能小于100 KB

partSize: 1048576,

//并行上传分片个数,默认5

parallel: 5,

//网络原因失败时,重新上传次数,默认为3

retryCount: 3,

//网络原因失败时,重新上传间隔时间,默认为2秒

retryDuration: 2,

//是否上报上传日志到视频点播,默认为true

enableUploadProgress: true,

//开始上传

'onUploadstarted': function (uploadInfo) {

log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下Java示例代码演示了如何在服务端上传媒资文件至视频点播,媒资类型支持音频、视频和图片。 * <p> * 一、音视频上传目前支持4种方式上传: * * 1.上传本地文件,使用分片上传,并支持断点续传,参见testUploadVideo函数。 * 1.1 当断点续传关闭时,最大支持上传任务执行时间为3000秒,具体可上传文件大小与您的网络带宽及磁盘读写能力有关。 * 1.2 当断点续传开启时,最大支持48.8TB的单个文件,注意,断点续传开启后,上传任务执行过程,同时会将当前上传位置写入本地磁盘文件,影响您上传文件的速度,请您根据文件大小选择是否开启 * * 2.上传网络流,可指定文件URL进行上传,支持断点续传,最大支持48.8TB的单个文件。 * 该上传方式需要先将网络文件下载到本地磁盘,再进行上传,所以要保证本地磁盘有充足的空间。参见testUploadURLStream函数。 * * 3.上传文件流,可指定本地文件进行上传,不支持断点续传,最大支持5GB的单个文件。参见testUploadFileStream函数。 * * 4.流式上传,可指定输入流进行上传,支持文件流和网络流等,不支持断点续传,最大支持5GB的单个文件。参见testUploadStream函数。 * <p> * * 二、图片上传目前支持2种方式上传: * 1.上传本地文件,不支持断点续传,最大支持5GB的单个文件,参见testUploadImageLocalFile函数 * 2.上传文件流和网络流,InputStream参数必选,不支持断点续传,最大支持5GB的单个文件。参见testUploadImageStream函数。 * 注:图片上传完成后,会返回图片ID和图片地址,也可通过GetImageInfo查询图片信息,参见接口文档 https://help.aliyun.com/document_detail/89742.html * <p> * * 三、m3u8文件上传目前支持2种方式: * 1.上传本地m3u8音视频文件(包括所有分片文件)到点播,需指定本地m3u8索引文件地址和所有分片地址。 * 2.上传网络m3u8音视频文件(包括所有分片文件)到点播,需指定m3u8索引文件和分片文件的URL地址。 * * 注: * 1) 上传网络m3u8音视频文件时需要保证地址可访问,如果有权限限制,请设置带签名信息的地址,且保证足够长的有效期,防止地址无法访问导致上传失败 * 2) m3u8文件上传暂不支持进度回调 * <p> * * 四、上传进度回调通知: * 1.默认上传进度回调函数:视频点播上传SDK内部默认开启上传进度回调函数,输出不同事件通知的日志,您可以设置关闭该上传进度通知及日志输出; * 2.自定义上传进度回调函数:您可根据自已的业务场景重新定义不同事件处理的方式,只需要修改上传回调示例函数即可。 * <p> * * 五、辅助媒资上传目前支持2种方式: * 1.上传本地文件,不支持断点续传,最大支持5GB的单个文件,参见testUploadAttachedMediaLocalFile函数 * 2.上传文件流和网络流,InputStream参数必选,不支持断点续传,最大支持5GB的单个文件。参见testUploadAttachedMediaStream函数。 * <p> * * 六、支持STS方式上传: * 1.您需要实现VoDRefreshSTSTokenListener接口的onRefreshSTSToken方法,用于生成STS信息, * 当文件上传时间超过STS过期时间时,SDK内部会定期调用此方法刷新您的STS信息进行后续文件的上传。 * <p> * * 七、可指定上传脚本部署的ECS区域(设置Request的EcsRegionId参数,取值参考存储区域标识:https://help.aliyun.com/document_detail/98194.html), * 如果与点播存储(OSS)区域相同,则自动使用内网上传文件至存储,上传更快且更省公网流量 * 由于点播API只提供外网域名访问,因此部署上传脚本的ECS服务器必须具有访问外网的权限。
可以通过以下步骤使用 HTML 和 JavaScript 实现图片压缩并上传到服务器: 1. 在 HTML 文件创建一个 input 元素,使用户可以选择要上传的图片文件: ```html <input type="file" id="file-input"> ``` 2. 使用 JavaScript 获取用户选择的图片文件,并将其转换为 base64 格式: ```javascript const fileInput = document.getElementById('file-input'); const file = fileInput.files[0]; const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function() { const base64Image = reader.result; }; ``` 3. 使用 JavaScript 创建一个 Image 对象,加载用户选择的图片文件,并在加载完成后将其绘制到一个 Canvas 上: ```javascript const img = new Image(); img.src = base64Image; img.onload = function() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 设置 Canvas 大小为图片大小 canvas.width = img.width; canvas.height = img.height; // 在 Canvas 上绘制图片 ctx.drawImage(img, 0, 0); // 获取 Canvas 上的压缩后的图片数据 const compressedImage = canvas.toDataURL('image/jpeg', 0.5); }; ``` 在这个例子,我们将图片压缩为质量为 50% 的 JPEG 格式。 4. 创建一个 XMLHttpRequest 对象,将压缩后的图片数据作为请求体发送到服务器: ```javascript const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(`image=${encodeURIComponent(compressedImage)}`); ``` 在这个例子,我们将压缩后的图片数据作为 image 参数发送到服务器。 完整的 HTML 和 JavaScript 代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片上传</title> </head> <body> <input type="file" id="file-input"> <button id="upload-btn">上传</button> <script> const fileInput = document.getElementById('file-input'); const uploadBtn = document.getElementById('upload-btn'); fileInput.addEventListener('change', function() { const file = fileInput.files[0]; const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function() { const base64Image = reader.result; const img = new Image(); img.src = base64Image; img.onload = function() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 设置 Canvas 大小为图片大小 canvas.width = img.width; canvas.height = img.height; // 在 Canvas 上绘制图片 ctx.drawImage(img, 0, 0); // 获取 Canvas 上的压缩后的图片数据 const compressedImage = canvas.toDataURL('image/jpeg', 0.5); uploadBtn.addEventListener('click', function() { const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(`image=${encodeURIComponent(compressedImage)}`); }); }; }; }); </script> </body> </html> ``` 请注意,这只是一个简单的示例,实际应用还需要考虑更多的因素,例如图片大小限制、上传进度显示、错误处理等等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值