1. Antecedentes:
Recientemente, el sistema de administración en segundo plano necesita agregar una función: cargar video, pero esta carga de video es diferente de la carga en el servidor. Debe cargarse en Alibaba Cloud VOD por el front-end y debe cargarse a través de Alibaba Cloud. SD del cliente.
2. Ali cloud js sdk cargar video vod
Documento del sitio web oficial: https://www.alibabacloud.com/help/zh/apsaravideo-for-vod/latest/use-the-upload-sdk-for-javascript
El documento proporciona dos métodos de carga, que se pueden seleccionar de acuerdo con Necesidades comerciales Usando el método de dirección y certificado de carga o el método STS, elegimos el método en el que el servidor devuelve la dirección de carga y el certificado al front-end.
3. Implementación:
Premisa: debe obtener la autorización de carga, la dirección de carga y las credenciales, y necesita acceso de back-end. Aquí nos enfocamos en la implementación de front-end, no en la implementación del lado del servidor. En resumen, solo solicite al back-end que proporcionar una interfaz para obtener estas dos cosas ~
1. Introducir el SDK de carga de JavaScript
// 方式一 : 在HTML中通过script引用
<!-- IE需要es6-promise，目前支持IE 10及以上 -->
<script src="../lib/es6-promise.min.js"></script>
<script src="../lib/aliyun-oss-sdk-6.17.1.min.js"></script>
<script src="../aliyun-vod-upload-sdk-1.5.5.min.js"></script>
// 方式二 : 模块化引用
import OSS from '../lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-6.17.1.min'
window.OSS = OSS;
import '../lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.5.min'
2. Declarar devolución de llamada de inicialización
var uploader = new AliyunUpload.Vod({
//userID，必填，您可以使用阿里云账号访问账号中心（https://account.console.aliyun.com/），即可查看账号ID
userId:"122",
//上传到视频点播的地域，默认值为'cn-shanghai'，
//eu-central-1，ap-southeast-1
region:"",
//分片大小默认1 MB，不能小于100 KB（100*1024）
partSize: 1048576,
//并行上传分片个数，默认5
parallel: 5,
//网络原因失败时，重新上传次数，默认为3
retryCount: 3,
//网络原因失败时，重新上传间隔时间，默认为2秒
retryDuration: 2,
// 添加文件成功
addFileSuccess: function() {
console.log('添加文件成功')
// 添加文件成功后调起开始上传
uploader.startUpload()
},
//开始上传
'onUploadstarted': function (uploadInfo) {
// 上传方式，需要根据uploadInfo.videoId是否有值（该值由SDK通过localstorage获取），调用 视频点播的不同接口获取uploadauth和uploadAddress
// 如果videoId有值，调用刷新音视频上传凭证接口，否则调用获取音视频上传地址和凭证接口
// 上传过程中，如果在点播控制台删除了音频或视频，即videoId不存在了，则会产生冲突，会出现控制台不存在videoId，而浏览器存在videoId的情况，报InvalidVideo.NotFound错误。此时，需手动清除localstorage
var url = '';
if (uploadInfo.videoId) {
//如果uploadInfo.videoId存在，调用刷新音视频上传凭证接口
url = 'refreshUrl'; // 此处URL需要替换为服务端AppServer对应的地址
}
else{
//如果uploadInfo.videoId不存在，调用获取音视频上传地址和凭证接口
url = 'createUrl'; // 此处URL需要替换为服务端AppServer对应的地址
}
// 以下请求实现为示例，用于演示设置凭证
fetch(url)
.then((res) => res.json())
.then((data) => {
uploader.setUploadAuthAndAddress(uploadInfo, data.UploadAuth, data.UploadAddress, data.VideoId);
});
},
//文件上传成功
'onUploadSucceed': function (uploadInfo) {
//uploadInfo 包含要上传的文件信息
// {
// videoId: '', // videoId，由服务端返回的音/视频ID
// Endpoint: '', // OSS对外服务的访问域名
// Bucket: '', // OSS存储空间
// Object: '' // OSS存储数据的基本单元
// }
console.log(uploadInfo) // 此处可以获取到上传后的vod
},
//文件上传失败
'onUploadFailed': function (uploadInfo, code, message) {
},
//文件上传进度，单位：字节
'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
},
//上传凭证或STS token超时
'onUploadTokenExpired': function (uploadInfo) {
//实现时，根据uploadInfo.videoId调用刷新音视频上传凭证接口重新获取UploadAuth
//从点播服务刷新的uploadAuth，设置到SDK里
var url = 'refreshUrl'; // 此处URL需要替换为服务端AppServer对应的地址
// 以下请求实现为示例，用于演示设置凭证
// 获取UploadAuth, UploadAddress, VideoId可能因AppServer实现有差异
fetch(url)
.then((res) => res.json())
.then((data) => {
uploader.resumeUploadWithAuth(data.UploadAuth);
});
},
//全部文件上传结束
'onUploadEnd':function(uploadInfo){
}
});
Explicación:
1) Dado que mi sistema en segundo plano está escrito en antd pro, el código lógico está escrito en model.js. Si sigue la demostración del documento anterior para solicitar credenciales y direcciones en ganchos como onUploadstarted, porque está escrito en la función asíncrona de efectos, se usa en el gancho La palabra clave yield hace una solicitud asincrónica y se informará un error y no se puede usar la palabra clave Por lo tanto, en el proyecto, primero solicito obtener el certificado y la dirección, y luego inicializo el instancia y llamada Actualmente, la carga se puede realizar normalmente, pero si el certificado de carga mencionado en la demostración tiene un tiempo de espera agotado u otras situaciones en las que es necesario distinguir entre actualizar y obtener credenciales, esto no es suficiente.
2) Los requisitos previos del documento mencionan que se recomienda usar el método de entrada estándar para seleccionar archivos. En mi proyecto, usé el componente de carga <Upload />** de **ant design. Traté de usar la entrada, pero el evento onchange no pudo obtener el objeto de archivo (onUploadstarted The hook necesita pasar el objeto de archivo), así que renuncie
3. Agregue el archivo seleccionado a la lista de carga y comience a cargar
uploader.addFile(file,null,null,null,'{"Vod":{}}');
4. Problemas encontrados:
1. Error-Invocación ilegal
El mayor escollo que se encuentra en el proceso es este. Al agregar un archivo, aparece el brindis e informa "llamada ilegal", y la consola no informa ningún error. Después de algunas investigaciones, se descubre que el objeto del archivo es incorrecto al agregar un archivo. me siento mareado~ porque estoy cargando el
video Finalmente, mi objeto de archivo ha sido procesado, y el objeto de archivo cargado por <Upload /> está encapsulado en otro objeto. Al cargar vod, addFile() agrega el objeto de archivo después de haberlo procesado Necesito que se pase el objeto de archivo original obtenido , lo que conduce a un error de llamada ilegal muy secreto
2. Vuelva a escribir la URL del video en el componente de carga de archivos
Porque después de subir a vod, todo lo que puedo obtener en este momento es el ID de video, y en la lista de componentes de video cargados, hay una función de hacer clic en "video" para abrir el video, que debe ser respaldado solicitando al servidor que devolver la URL del video a través de este vod El video está encendido.
Esto involucra la lógica del componente de carga de video y voy a escribir otro artículo para explicar el método de implementación. Debido a que aquí se requiere la operación inversa, la lista de representación de fileList se invierte.
5. Subir efecto de éxito
6. Escribe al final
Aquí solo se realiza la carga de vod más simple, y el tiempo de espera y otros escenarios y otras aplicaciones avanzadas en el documento no están involucrados, por lo que si encuentra problemas, lea el documento ~ Por cierto, si realmente no puede resolverlo, puede enviar una orden de trabajo a Alibaba Cloud para obtener ayuda. ~