tencent cloud

<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 encode 형식
         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 객체 경로를 생성하고 업로드 도메인과 PostObject API에 필요한 policy 서명을 반환할 수 있도록 파일 확장자 전달
            // 서버 예시 참고: https://github.com/tencentyun/cos-demo/tree/main/server/post-policy
            uni.request({
               url: 'http://127.0.0.1:3000/post-policy?ext=' + extName,
               success: (res) => {
                  callback && callback(null, res.data.data);
               },
               error(err) {
                  callback && callback(err);
               },
            });
         };

         // 업로드 요청을 시작하고 업로드는 PostObject API 및 policy 서명 보호 사용
         // API 문서: https://www.tencentcloud.com/document/product/436/14690#.E7.AD.BE.E5.90.8D.E4.BF.9D.E6.8A.A4
         var uploadFile = function (opt, callback) {
            var formData = {
               key: opt.cosKey,
               policy: opt.policy, // Base64 policy 문자열
               success_action_status: 200,
               'q-sign-algorithm': opt.qSignAlgorithm,
               'q-ak': opt.qAk,
               'q-key-time': opt.qKeyTime,
               'q-signature': opt.qSignature,
            };
            // 서버가 계산을 위해 임시 키를 사용하는 경우 x-cos-security-token 전달 필요
            if (opt.securityToken) formData['x-cos-security-token'] = opt.securityToken;
            uni.uploadFile({
               url: 'https://' + opt.cosHost, // 실제 API 주소가 아닌 예시
               filePath: opt.filePath,
               name: 'file',
               formData: formData,
               success: (res) => {
                  if (![200, 204].includes(res.statusCode)) return callback && callback(res);
                  var fileUrl = 'https://' + opt.cosHost + '/' + camSafeUrlEncode(opt.cosKey).replace(/%2F/g, '/');
                  callback && callback(null, fileUrl);
               },
               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) {
                  // 파일 업로드
                  info.filePath = filePath;
                  uploadFile(info, function (err, fileUrl) {
                     vm.fileUrl = 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>