Upload SDK untuk WeChat Mini Program - ApsaraVideo VOD - Alibaba Cloud Documentation Center

Anda dapat menggunakan ApsaraVideo VOD Upload SDK untuk mengunggah file media dari WeChat mini program ke penyimpanan VOD.

Catatan penggunaan

SDK WeChat mini program mendukung pengunggahan file audio, video, dan gambar, tetapi tidak mendukung pengunggahan aset media pendukung.

Unduh SDK dan demo

Versi SDK: 1.0.3
Waktu pembaruan: 2024-07-15
Hash MD5 paket: 5145518e0bbb410c156b37c04c447a6f
Alamat unduh: WeChat mini program upload SDK dan kode contoh

SDK Integrasi

Salin file SDK ke proyek Anda dan impor dependensi pada halaman terkait.

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

Pengaturan dasar

Inisialisasi instans upload

Saat menginisialisasi instans SDK, Anda harus meneruskan parameter userId untuk mengidentifikasi pengunggah. Parameter ini wajib diisi dan tidak boleh kosong. Anda dapat menggunakan ID akun Alibaba Cloud atau ID pengguna kustom. Untuk melihat ID akun Anda, buka Account Center. Jika Anda tidak meneruskan parameter userId atau meneruskan nilai kosong, akan muncul error.
Bidang region harus diatur ke salah satu ID wilayah yang didukung oleh ApsaraVideo VOD.

var uploader = new VODUpload({
  // ID akun Alibaba Cloud Anda. Parameter ini tidak boleh kosong. Untuk melihat ID akun Anda, buka Account Center.
  userId: "25346073170691****",
  // Wilayah tempat Anda ingin mengunggah file ke ApsaraVideo VOD. Nilai default: 'cn-shanghai'. Nilai valid lainnya termasuk 'eu-central-1' dan 'ap-southeast-1'. Untuk informasi lebih lanjut, lihat Ikhtisar.
  region: "cn-shanghai",
  // Jumlah percobaan ulang saat unggahan gagal karena masalah jaringan. Nilai default: 3.
  retryCount: 3,
  // Interval antar percobaan ulang saat unggahan gagal karena masalah jaringan. Nilai default: 2 detik.
  retryDuration: 2,
  // Unggahan dimulai.
  onUploadstarted: function (uploadInfo) {},
  // File berhasil diunggah.
  onUploadSucceed: function (uploadInfo) {},
  // File gagal diunggah.
  onUploadFailed: function (uploadInfo, code, message) {},
  // Progres unggahan. Satuan: byte.
  onUploadProgress: function (uploadInfo, totalSize, loadedPercent) {},
  // Kredensial unggahan kedaluwarsa.
  onUploadTokenExpired: function (uploadInfo) {},
  // Semua file telah diunggah.
  onUploadEnd: function (uploadInfo) {},
});

Atur kredensial

Tinjau proses unggahan sisi klien secara keseluruhan dan deploy layanan otorisasi sesuai metode pilihan Anda.

Jika Anda menggunakan metode upload URL dan credential, Anda harus mendapatkan upload URL dan credential dari layanan otorisasi.
Jika Anda menggunakan metode Security Token Service (STS) token, Anda harus mendapatkan token STS dari layanan otorisasi.

Atur semua informasi otorisasi dalam callback onUploadstarted. Saat kredensial kedaluwarsa, callback onUploadTokenExpired dipicu. Panggil metode yang sesuai dalam callback ini untuk memperbarui kredensial.

Upload URL dan credential

Panggil metode setUploadAuthAndAddress. Saat kredensial kedaluwarsa, callback onUploadTokenExpired dipicu. Panggil metode resumeUploadWithAuth untuk mengatur kredensial baru dan melanjutkan unggahan.

// Unggahan dimulai.
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)
        })
    });

},
// Kredensial unggahan kedaluwarsa.
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)
    })
  });
},

Deskripsi metode:

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

Parameter	Deskripsi
uploadInfo	Parameter pertama dari callback onUploadstarted.
uploadAuth	Kredensial unggahan yang dikembalikan oleh operasi CreateUploadVideo.
uploadAddress	URL unggahan yang dikembalikan oleh operasi CreateUploadVideo.
videoId	ID audio atau video yang dikembalikan oleh operasi CreateUploadVideo.

STS token

Panggil metode setSTSToken. Saat token STS kedaluwarsa, callback onUploadTokenExpired dipicu. Panggil metode resumeUploadWithSTSToken untuk mengatur token STS baru dan melanjutkan unggahan.

 /* Metode callback - Unggahan dimulai. */
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);
        })
    });

},
// Kredensial unggahan kedaluwarsa.
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)
    })
  });
},

Deskripsi metode:

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

Parameter	Deskripsi
uploadInfo	Parameter pertama dari callback onUploadstarted.
accessKeyId	Bidang `AccessKeyId` dalam token STS.
accessKeySecret	Bidang `AccessKeySecret` dalam token STS.
secretToken	Bidang `SecretToken` dalam token STS.

Tambahkan file

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

// Pilih 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);
        }
    })
},

Deskripsi metode:

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

Parameter	Wajib	Tipe	Deskripsi
file	Ya	File	File yang akan diunggah.
endpoint	Tidak	String	Endpoint OSS. Jika null, AppServer memilih endpoint.
bucket	Tidak	String	Bucket tujuan. Jika null, AppServer memilih bucket.
object	Tidak	String	Objek tujuan. Jika null, AppServer memilih objek.
paramData	Tidak	String	Metadata file seperti judul, deskripsi, transkoding, dan pengaturan callback. Tentukan `paramData` saat menggunakan unggahan token STS. Nilai parameter `paramData` adalah string JSON. Contoh: `'{"Vod":{}}'`. Anda harus menentukan `Vod` dalam permintaan. Anda dapat menempatkan parameter yang didukung oleh parameter paramData di bawah `Vod`. Anda dapat menempatkan parameter permintaan dari operasi CreateUploadVideo atau CreateUploadImage.

Mulai unggahan

uploader.startUpload();

Setelah unggahan file dimulai, callback onUploadProgress dipanggil untuk menyinkronkan progres unggahan.
Jika unggahan file berhasil, callback onUploadSucceed dipanggil untuk mengembalikan hasil unggahan.

Fitur lanjutan

Gunakan akselerasi unggahan

Untuk mengunggah file besar berukuran gigabyte atau terabyte, atau mengunggah video lintas wilayah—misalnya dari wilayah di Tiongkok daratan ke alamat penyimpanan di wilayah Singapore—Anda dapat mengaktifkan fitur akselerasi unggahan.

Untuk mengaktifkan fungsi akselerasi unggahan, Anda perlu membuat tiket. Anda perlu memberikan UID akun Alibaba Cloud dan alamat penyimpanan yang memerlukan akselerasi unggahan.

Metode 1: Upload URL dan credential

Jika Anda menggunakan metode ini untuk mengunggah file, panggil operasi CreateUploadVideo dan tentukan pasangan kunci-nilai dalam parameter UserData untuk mengonfigurasi pengaturan akselerasi. Contoh kode:

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

Metode 2: STS token

Jika Anda menggunakan metode ini untuk mengunggah file, panggil metode addFile, tambahkan properti UserData ke parameter parmData, lalu konfigurasikan konten unggahan. Contoh kode:

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

Deskripsi UserData

Nama	Tipe	Wajib	Deskripsi
userData	string	Tidak	Konfigurasi kustom, seperti konfigurasi callback dan konfigurasi akselerasi unggahan. Nilainya harus berupa string JSON.

Tabel berikut menjelaskan parameter-parameter tersebut.

Parameter	Tipe	Deskripsi
Type	string	Tipe file yang ingin Anda aktifkan akselerasi unggahannya. Tetapkan nilainya ke oss.
Domain	string	Nama domain yang dipercepat dari bucket. Secara default, HTTPS digunakan. Catatan Titik akhir terakselerasi yang ditetapkan setelah Anda mengaktifkan akselerasi unggahan digunakan, seperti vod-*******.oss-accelerate.aliyuncs.com.

Untuk informasi selengkapnya tentang cara mengonfigurasi UserData, lihat Deskripsi parameter permintaan.

Hentikan unggahan

Catatan

stopUpload hanya berlaku saat file sedang diunggah.

uploader.stopUpload();

Manage daftar file

Gunakan operasi berikut untuk mengelola file yang telah diunggah atau sedang dalam proses.

listFiles: Menanyakan daftar unggahan.
Mengembalikan file yang ditambahkan melalui addFile. Properti file menunjukkan tipe file. Telusuri daftar untuk mendapatkan indeks file guna operasi manajemen.
```
var list = uploader.listFiles();
for (var i=0; i<list.length; i++) {
    console.log("file:" + list[i].file.name);
}
```

deleteFile: Menghapus file yang akan diunggah.

uploader.deleteFile(index);//Indeks file yang ingin Anda hapus. Indeks dikembalikan oleh operasi listFiles.

cancelFile: Membatalkan unggahan file.
Catatan
- Setelah Anda memanggil cancelFile, pesan oss is cancel as error muncul di konsol. Hal ini mencegah bagian yang telah diunggah memenuhi penyimpanan dan menimbulkan biaya.
- Untuk melanjutkan unggahan yang dibatalkan, panggil uploader.resumeFile(index); untuk memulihkan file terlebih dahulu.
```
uploader.cancelFile(index);
```
resumeFile: Melanjutkan unggahan file.
```
uploader.resumeFile(index);
```
cleanList: Mengosongkan daftar unggahan.
```
uploader.cleanList();
```

Pemecahan Masalah

Jika terjadi error saat menggunakan SDK WeChat mini program, identifikasi penyebabnya berdasarkan kode kesalahan. Untuk informasi selengkapnya, lihat Kode kesalahan.