<template>
<view class="content">
   <button type="default" @click="selectUpload">ファイルを選択してアップロード</button>
   <image v-if="fileUrl" class="image" :src="fileUrl"></image>
</view>
</template>

<script>
export default {
   data() {
      return {
         title: 'Hello',
         fileUrl: ''
      };
   },
   onLoad() {

   },
   methods: {
      selectUpload() {
         var vm = this;
         // より多くの文字エンコーディングに対応したURLエンコード形式
         var camSafeUrlEncode = function (str) {
            return encodeURIComponent(str)
                    .replace(/!/g, '%21')
                    .replace(/'/g, '%27')
                    .replace(/\\(/g, '%28')
                    .replace(/\\)/g, '%29')
                    .replace(/\\*/g, '%2A');
         };
         // アップロードパスとアップロードクレデンシャルの取得
         var getUploadInfo = function (extName, callback) {
            // ファイルの拡張子を渡し、バックエンドにランダムなCOSオブジェクトパスを生成させ、PUT Objectインターフェースで使用する署名を返す
            // バックエンドは以下を返す必要があります：cosHost、cosKey、認証情報、securityToken（オプション）
            uni.request({
               url: 'http://127.0.0.1:3000/put-signature?ext=' + extName,
               success: (res) => {
                 // リターンフォーマットが正しいかどうかを確認します
                 console.log(res);
                  callback && callback(null, res.data);
               },
               fail(err) {
                  callback && callback(err);
               },
            });
         };
         // ファイルをArrayBufferとして読み込む
         var readFileAsArrayBuffer = function (filePath, callback) {
            uni.getFileSystemManager().readFile({
               filePath: filePath,
               success: (res) => {
                  callback && callback(null, res.data); // res.dataはArrayBufferです
               },
               fail(err) {
                  callback && callback(err);
               }
            });
         };
         // アップロードリクエストを送信し、PUT Objectインターフェースを使用します
         // インターフェースドキュメント：https://www.tencentcloud.com/document/product/436/7749
         var uploadFile = function (opt, fileData, callback) {
            var headers = {
               'Authorization': opt.authorization, // 署名情報
               'Content-Type': opt.contentType || 'application/octet-stream'
            };
            // サーバー側が一時キーを使用して計算する場合、x-cos-security-tokenを渡す必要があります
            if (opt.securityToken) {
               headers['x-cos-security-token'] = opt.securityToken;
            }
            console.log('アップロードリクエスト情報：', {
               url: 'https://' + opt.cosHost + '/' + opt.cosKey,
               headers: headers
            });

            uni.request({
               url: 'https://' + opt.cosHost + '/' + opt.cosKey,
               method: 'PUT',
               header: headers,
               data: fileData, // ArrayBuffer形式
               success: (res) => {
                  console.log('アップロードレスポンス：', res);
                  if (![200, 204].includes(res.statusCode)) {
                     console.error('アップロードが失敗しました、ステータスコード：', res.statusCode);
                     return callback && callback(res);
                  }
                  var fileUrl = 'https://' + opt.cosHost + '/' + camSafeUrlEncode(opt.cosKey).replace(/%2F/g, '/');
                  callback && callback(null, fileUrl);
               },
               fail(err) {
                  console.error('アップロードリクエスト失敗：', err);
                  callback && callback(err);
               },
            });
         };

         // ファイル選択
         uni.chooseImage({
            success: (chooseImageRes) => {
               var file = chooseImageRes.tempFiles[0];
               if (!file) return;
               // アップロードするローカルファイルのパスを取得する
               var filePath = chooseImageRes.tempFilePaths[0];
               // アップロードされたファイルの拡張子を取得し、その後、サーバー側がランダムなCOSパスを生成します
               var fileName = file.name;
               var lastIndex = fileName.lastIndexOf('.');
               var extName = lastIndex > -1 ? fileName.slice(lastIndex + 1) : '';
               
               // アップロード前用のドメイン名、パス、署名を取得する
               getUploadInfo(extName, function (err, info) {
                  if (err) {
                     console.error('アップロード情報の取得に失敗しました：', err);
                     return;
                  }
                  // 返されるinfoのフォーマットが正しいかどうかを確認します
                  console.log(info);
                  
                  // ファイルをArrayBufferとして読み込む
                  readFileAsArrayBuffer(filePath, function (err, fileData) {
                     if (err) {
                        console.error('ファイルの読み込みが失敗しました：', err);
                        return;
                     }
                     
                     // ファイルアップロード
                     uploadFile(info, fileData, function (err, fileUrl) {
                        if (err) {
                           console.error('アップロード失敗：', err);
                           return;
                        }
                        vm.fileUrl = fileUrl;
                        console.log('アップロード済み:', fileUrl);
                     });
                  });
               });
            }
         });
      },
   }
}
</script>

<style>
.content {
   padding: 20px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.image {
   margin-top: 20px;
   margin-left: auto;
   margin-right: auto;
}
</style>