Unggah file menggunakan SDK WeChat Mini Program - ApsaraVideo VOD

Topik ini menjelaskan cara menggunakan SDK untuk mini program WeChat guna mengunggah file media lokal ke penyimpanan ApsaraVideo VOD.

Deskripsi fitur

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

Unduh SDK dan demo

Versi: 1.0.3
Terakhir diperbarui: 2024-07-15
Hash MD5 paket: 5145518e0bbb410c156b37c04c447a6f
URL unduh: SDK unggah mini program WeChat dan kode contoh

Metode 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 unggah

Saat menginisialisasi instans SDK, Anda harus meneruskan parameter userId untuk mengidentifikasi pengunggah. Parameter ini wajib 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, kesalahan akan dilaporkan.
Field 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 di https://account-console.alibabacloud.com/.
  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 unggah media.
  region: "cn-shanghai",
  // Jumlah percobaan ulang saat unggah gagal karena masalah jaringan. Nilai default: 3.
  retryCount: 3,
  // Interval antar percobaan ulang saat unggah gagal karena masalah jaringan. Nilai default: 2 detik.
  retryDuration: 2,
  // Unggah dimulai.
  onUploadstarted: function (uploadInfo) {},
  // File berhasil diunggah.
  onUploadSucceed: function (uploadInfo) {},
  // File gagal diunggah.
  onUploadFailed: function (uploadInfo, code, message) {},
  // Progres unggah. Satuan: byte.
  onUploadProgress: function (uploadInfo, totalSize, loadedPercent) {},
  // Kredensial unggah kedaluwarsa.
  onUploadTokenExpired: function (uploadInfo) {},
  // Semua file telah diunggah.
  onUploadEnd: function (uploadInfo) {},
});

Atur kredensial

Pertama-tama, pahami proses unggah secara keseluruhan untuk klien. Kemudian, deploy layanan otorisasi yang sesuai berdasarkan metode otorisasi yang Anda pilih.

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

Atur informasi otorisasi yang dikembalikan dalam callback onUploadstarted. Saat kredensial kedaluwarsa, callback onUploadTokenExpired dipicu. Anda kemudian harus memanggil metode untuk memperbarui kredensial dan mendapatkan kredensial baru.

Metode URL unggah dan kredensial

Untuk mengatur URL unggah dan kredensial, panggil metode setUploadAuthAndAddress. Saat kredensial kedaluwarsa, callback onUploadTokenExpired dipicu. Anda kemudian dapat memanggil metode resumeUploadWithAuth untuk mengatur kredensial baru dan melanjutkan unggah.

// Unggah dimulai.
onUploadstarted: function (uploadInfo) {
    console.log('Memulai unggah file...');
    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 unggah 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	Nilainya dapat diperoleh dari parameter pertama dalam callback onUploadstarted.
uploadAuth	Kredensial unggah yang dikembalikan oleh operasi CreateUploadVideo.
uploadAddress	URL unggah yang dikembalikan oleh operasi CreateUploadVideo.
videoId	ID audio atau video yang dikembalikan oleh operasi CreateUploadVideo.

Metode token STS

Untuk mengatur token STS, panggil metode setSTSToken. Saat token STS kedaluwarsa, callback onUploadTokenExpired dipicu. Anda kemudian dapat memanggil metode resumeUploadWithSTSToken untuk mengatur token STS baru dan melanjutkan unggah.

 /* Metode callback - Unggah dimulai. */
onUploadstarted: function (uploadInfo) {
    console.log('Memulai unggah file...');
    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 unggah 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	Nilainya dapat diperoleh dari parameter pertama dalam callback onUploadstarted.
accessKeyId	Field `AccessKeyId` dalam token STS.
accessKeySecret	Field `AccessKeySecret` dalam token STS.
secretToken	Field `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 media yang akan diunggah.
endpoint	Tidak	String	Titik akhir OSS. Jika Anda menentukan null, nilai sebenarnya ditentukan oleh AppServer.
bucket	Tidak	String	Bucket tempat Anda ingin mengunggah file. Jika Anda menentukan null, nilai sebenarnya ditentukan oleh AppServer.
object	Tidak	String	Objek tempat Anda ingin mengunggah file. Jika Anda menentukan null, nilai sebenarnya ditentukan oleh AppServer.
paramData	Tidak	String	Informasi tentang file video atau audio yang ingin Anda unggah, seperti judul, deskripsi, pengaturan transkoding, dan pengaturan callback. Anda dapat menentukan `paramData` jika Anda menggunakan token STS untuk mengunggah file video atau audio ke ApsaraVideo VOD. Nilai parameter `paramData` adalah string JSON, seperti `'{"Vod":{}}'`. Anda harus menentukan `Vod` dalam permintaan. Anda dapat menyarangkan parameter yang didukung oleh parameter paramData di bawah `Vod`. Anda dapat menyarangkan parameter permintaan dari operasi CreateUploadVideo - Dapatkan alamat unggah dan kredensial untuk audio atau video atau CreateUploadImage - Dapatkan alamat unggah dan kredensial untuk citra.

Mulai unggah

uploader.startUpload();

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

Fitur lanjutan

Gunakan akselerasi unggah

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

Untuk mengaktifkan fitur akselerasi unggah, kirim tiket. Anda perlu memberikan Alibaba Cloud Account UID dan Storage Address yang ingin Anda aktifkan fitur akselerasi unggahnya.

Metode 1: URL unggah dan kredensial

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: Token STS

Jika Anda menggunakan metode ini untuk mengunggah file, panggil metode addFile, tambahkan properti UserData ke parameter parmData, lalu konfigurasikan konten unggah. 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 unggah. Nilainya harus berupa string JSON.

Tabel berikut menjelaskan parameter-parameter tersebut.

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

Untuk informasi selengkapnya tentang cara mengonfigurasi UserData, lihat Parameter permintaan.

Hentikan unggah

Catatan

Anda hanya dapat memanggil stopUpload saat file sedang diunggah. Jika tidak, stopUpload tidak berpengaruh.

uploader.stopUpload();

Manajemen antrian

Anda dapat memanggil metode berikut untuk mengelola file yang diunggah atau sedang diunggah:

Kueri daftar unggah
Data yang dikembalikan berisi informasi tentang file yang diunggah dengan memanggil addFile. "file:" menunjukkan bahwa setiap elemen dalam daftar adalah file. Anda dapat memperoleh indeks file yang ingin Anda kelola dengan melakukan traversal.
```
var list = uploader.listFiles();
for (var i=0; i<list.length; i++) {
    console.log("file:" + list[i].file.name);
}
```

Hapus file yang akan diunggah

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

Batalkan unggah satu file
Catatan
- Setelah Anda memanggil cancelFile, pesan oss is cancel as error ditampilkan di konsol. Hal ini mencegah bagian yang telah diunggah menempati ruang penyimpanan dan menghemat biaya yang tidak perlu.
- Untuk melanjutkan unggah yang dibatalkan, Anda harus menggunakan uploader.resumeFile(index); untuk memulihkan file sebelum melanjutkan unggah.
```
uploader.cancelFile(index);
```
Lanjutkan unggah satu file
```
uploader.resumeFile(index);
```
Bersihkan daftar unggah
```
uploader.cleanList();
```

Pemecahan Masalah

Jika terjadi kesalahan saat menggunakan SDK mini program WeChat, Anda dapat menggunakan kode kesalahan untuk mengidentifikasi penyebabnya dengan cepat. Untuk informasi selengkapnya, lihat Kode kesalahan sisi klien.