Upload SDK for WeChat Mini Program - ApsaraVideo VOD: Central de Documentação do Alibaba Cloud

Use o ApsaraVideo VOD Upload SDK para enviar arquivos de mídia de um WeChat mini program para o armazenamento do VOD.

Observações de uso

O SDK para WeChat mini program permite o envio de arquivos de áudio, vídeo e imagem. Não há suporte para o envio de recursos de mídia auxiliares.

Baixe o SDK e a demonstração

Versão do SDK: 1.0.3
Data de atualização: 15-07-2024
Hash MD5 do pacote: 5145518e0bbb410c156b37c04c447a6f
Endereço para baixe: SDK de upload para WeChat mini program e código de exemplo

Integrar o SDK

Copie o arquivo do SDK para seu projeto e importe a dependência na página correspondente.

import VODUpload from 'aliyun-upload-sdk-1.0.3.min.js'

Configurações básicas

Inicializar a instância de upload

Ao inicializar a instância do SDK, passe o parâmetro userId para identificar quem está fazendo o upload. Esse parâmetro é obrigatório e não pode estar vazio. Use o ID da sua conta Alibaba Cloud ou um ID de usuário personalizado. Para consultar o ID da sua conta, acesse a Central de Contas. Se você não passar o parâmetro userId ou passar um valor vazio, um erro será retornado.
Defina o campo region com um dos IDs de região suportados pelo ApsaraVideo VOD.

var uploader = new VODUpload({
  // The ID of your Alibaba Cloud account. This parameter cannot be empty. To view your account ID, go to the Account Center.
  userId: "25346073170691****",
  // The region where you want to upload files to ApsaraVideo VOD. Default value: 'cn-shanghai'. Other valid values include 'eu-central-1' and 'ap-southeast-1'. For more information, see Overview.
  region: "cn-shanghai",
  // The number of retries when an upload fails due to network issues. Default value: 3.
  retryCount: 3,
  // The interval between retries when an upload fails due to network issues. Default value: 2 seconds.
  retryDuration: 2,
  // The upload starts.
  onUploadstarted: function (uploadInfo) {},
  // The file is uploaded.
  onUploadSucceed: function (uploadInfo) {},
  // The file fails to be uploaded.
  onUploadFailed: function (uploadInfo, code, message) {},
  // The upload progress. Unit: bytes.
  onUploadProgress: function (uploadInfo, totalSize, loadedPercent) {},
  // The upload credential expires.
  onUploadTokenExpired: function (uploadInfo) {},
  // All files are uploaded.
  onUploadEnd: function (uploadInfo) {},
});

Definir credenciais

Revise o processo de upload geral no lado do cliente e implante o serviço de autorização conforme o método de sua preferência.

Se optar pelo método de URL e credencial de upload, obtenha a URL e a credencial de upload por meio do serviço de autorização.
Caso utilize o método de token do Security Token Service (STS), obtenha um token STS no serviço de autorização.

Configure todas as informações de autorização no callback onUploadstarted. Quando as credenciais expiram, o sistema aciona o callback onUploadTokenExpired. Nesse momento, chame o método adequado para renovar as credenciais.

URL e credencial de upload

Chame o método setUploadAuthAndAddress. Se a credencial expirar, o callback onUploadTokenExpired será disparado. Nesse caso, invoque o método resumeUploadWithAuth para definir uma nova credencial e retomar o upload.

// The upload starts.
onUploadstarted: function (uploadInfo) {
    console.log('Starting file upload...');
    console.log("onUploadStarted:" + JSON.stringify(uploadInfo))

    var url = "https://alivc-demo.aliyuncs.com/demo/getVideoUploadAuth?title=" + uploadInfo.url + "&fileName=" + uploadInfo.url + "&fileSize=" + uploadInfo.fileSize + "&description=description&coverURL=" + uploadInfo.coverUrl + "&tags=tags";

    wx.request({
        'url': url,
        success: (res => {
            if (res.statusCode === 200) {
                var akInfo = res.data.data;
                uploader.setUploadAuthAndAddress(uploadInfo, akInfo.uploadAuth, akInfo.uploadAddress, akInfo.imageId);
            } else {
                console.log(res)
                uploader.stopUpload();
            }
        }),
        fail: (res => {
            uploader.stopUpload();
            console.log(res)
        })
    });

},
// The upload credential expires.
onUploadTokenExpired: function (uploadInfo) {
    const url = "https://alivc-demo.aliyuncs.com/demo/refreshVideoUploadAuth?videoId=" + uploadInfo.videoId;
    
    wx.request({
      'url': url,
      success: (res => {
          if (res.statusCode === 200) {
              var akInfo = res.data.data;
              uploader.resumeUploadWithAuth(akInfo.uploadAuth);
          } else {
              console.log(res)
              uploader.stopUpload();
          }
      }),
      fail: (res => {
          uploader.stopUpload();
          console.log(res)
    })
  });
},

Descrição dos métodos:

uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
uploader.resumeUploadWithAuth(uploadAuth)

Parâmetro	Descrição
uploadInfo	Primeiro parâmetro do callback onUploadstarted.
uploadAuth	Credencial de upload retornada pela operação CreateUploadVideo.
uploadAddress	URL de upload retornada pela operação CreateUploadVideo.
videoId	ID de áudio ou vídeo retornado pela operação CreateUploadVideo.

Token STS

Use o método setSTSToken. Caso o token STS expire, o sistema dispara o callback onUploadTokenExpired. Para configurar um novo token STS e continuar o upload, chame o método resumeUploadWithSTSToken.

 /* Callback method - The upload starts. */
onUploadstarted: function (uploadInfo) {
    console.log('Starting file upload...');
    console.log("onUploadStarted:" + JSON.stringify(uploadInfo))
    wx.request({
        url: "https://alivc-demo.aliyuncs.com/demo/getSts",
        // data: data,
        // header: header,
        // method: method,
        success: (res => {
            if (res.statusCode === 200) {
                var akInfo = res.data.data;
                uploader.setSTSToken(uploadInfo, akInfo.accessKeyId, akInfo.accessKeySecret, akInfo.securityToken);
            } else {
                console.log(res)
            }
        }),
        fail: (res => {
            onError(res);
        })
    });

},
// The upload credential expires.
onUploadTokenExpired: function (uploadInfo) {
    const url = "https://alivc-demo.aliyuncs.com/demo/getSts";
    
    wx.request({
      'url': url,
      success: (res => {
          if (res.statusCode === 200) {
              var akInfo = res.data.data;
              uploader.resumeUploadWithSTSToken(akInfo.uploadAuth);
          } else {
              console.log(res)
              uploader.stopUpload();
          }
      }),
      fail: (res => {
          uploader.stopUpload();
          console.log(res)
    })
  });
},

Descrição dos métodos:

uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken)
uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken)

Parâmetro	Descrição
uploadInfo	Primeiro parâmetro do callback onUploadstarted.
accessKeyId	Campo `AccessKeyId` presente no token STS.
accessKeySecret	Campo `AccessKeySecret` presente no token STS.
secretToken	Campo `SecretToken` presente no token STS.

Adicionar arquivos

<view class="weui-uploader__input-box">
  <view class="weui-uploader__input" bindtap="chooseVideo"></view>
</view>

// Select a video
chooseVideo: function (e) {
    var that = this;
    wx.chooseVideo({
        sourceType: ['album', 'camera'],
        maxDuration: 60,
        compressed: false,
        camera: 'back',
        success: function (res) {
            var file = {url: res.tempFilePath, coverUrl: res.thumbTempFilePath};
            var uploader = that.data.uploader;
            var paramData = '{"Vod":{}}';
            uploader.addFile(file, null, null, null, paramData);
        }
    })
},

Descrição do método:

uploader.addFile(file,endpoint,bucket,object,paramData)

Parâmetro	Obrigatório	Tipo	Descrição
file	Sim	File	Arquivo a ser enviado.
endpoint	Não	String	Endpoint do OSS. Se for nulo, o AppServer seleciona o endpoint automaticamente.
bucket	Não	String	Bucket de destino. Se for nulo, o AppServer escolhe o bucket.
object	Não	String	Objeto de destino. Caso seja nulo, o AppServer define o objeto.
paramData	Não	String	Metadados do arquivo, como título, descrição, transcodificação e configurações de callback. Especifique `paramData` ao utilizar upload com token STS. O valor do parâmetro `paramData` é uma string JSON. Exemplo: `'{"Vod":{}}'`. É obrigatório incluir `Vod` na solicitação. Parâmetros suportados podem ser aninhados sob `Vod`. Também é possível aninhar os parâmetros de solicitação das operações CreateUploadVideo ou CreateUploadImage.

Iniciar o upload

uploader.startUpload();

Após o início do upload, o callback onUploadProgress é chamado para sincronizar o progresso da transferência.
Se o upload for concluído com sucesso, o callback onUploadSucceed retorna o resultado da operação.

Recursos avançados

Usar aceleração de upload

Para enviar arquivos grandes, na casa de gigabytes ou terabytes, ou realizar uploads entre regiões — por exemplo, de uma região na China continental para um endereço de armazenamento na região de Singapura — ative o recurso de aceleração de upload.

Para habilitar essa funcionalidade, abra um ticket. Informe seu ID da Conta e o bucket que deve ser acelerado.

Método 1: URL e credencial de upload

Neste cenário, chame a operação CreateUploadVideo e defina pares chave-valor no parâmetro UserData para ajustar as configurações de aceleração. Código de exemplo:

UserData={
  "AccelerateConfig": {
    "Type": "oss",
    "Domain": "https://oss-accelerate.aliyuncs.com"
  }
}

Método 2: Token STS

Ao adotar este método, invoque o método addFile, adicione a propriedade UserData ao parâmetro parmData e configure o conteúdo do upload. Veja o exemplo:

uploader.addFile(file,null,null,null,'{"Vod":{"UserData":{"AccelerateConfig":{"Type":"oss","Domain":"https://oss-accelerate.aliyuncs.com"}}}}');

Descrição do UserData

Nome	Tipo	Obrigatório	Descrição
userData	string	Não	Configurações personalizadas, incluindo callbacks e definições de aceleração de upload. O valor deve ser uma string JSON válida.

A tabela abaixo detalha os parâmetros envolvidos.

Parâmetro	Tipo	Descrição
Type	string	Tipo de arquivo para o qual a aceleração será ativada. Defina o valor como oss.
Domain	string	Nome de domínio acelerado do bucket. Por padrão, utiliza-se HTTPS. Nota Um endpoint acelerado atribuído após a ativação do recurso será usado, como vod-***.oss-accelerate.aliyuncs.com.

Para mais detalhes sobre como configurar o UserData, consulte Descrições dos parâmetros de solicitação.

Parar um upload

Nota

O método stopUpload só tem efeito enquanto um arquivo está sendo transferido.

uploader.stopUpload();

Gerencie a lista de arquivos

Use as operações abaixo para administrar arquivos já enviados ou em andamento.

listFiles: Consulta a lista de uploads.

Retorna os arquivos adicionados via addFile. A propriedade file indica o tipo do arquivo. Percorra a lista para obter os índices necessários às operações de gerenciamento.
```
var list = uploader.listFiles();
for (var i=0; i<list.length; i++) {
    console.log("file:" + list[i].file.name);
}
```

deleteFile: Remove um arquivo pendente de upload.

uploader.deleteFile(index);//The index of the file that you want to delete. The index is returned by the listFiles operation.

cancelFile: Cancela o envio de um arquivo específico.
Nota
- Ao chamar cancelFile, a mensagem oss is cancel as error aparece no console. Isso evita que partes já enviadas ocupem espaço de armazenamento e gerem custos desnecessários.
- Para retomar um upload cancelado, primeiro restaure o arquivo chamando uploader.resumeFile(index);.
```
uploader.cancelFile(index);
```
resumeFile: Retoma o upload de um arquivo interrompido.
```
uploader.resumeFile(index);
```
cleanList: Limpa completamente a lista de uploads.
```
uploader.cleanList();
```

Solução de problemas

Caso ocorra algum erro durante o uso do SDK para WeChat mini program, identifique a causa raiz através do código de erro retornado. Para mais informações, consulte Códigos de erro.