AWS S3 實作預簽名上傳

步驟：

1、前端上傳檔案，将要上傳的檔案名稱傳到背景

2、背景通過該檔案名稱生成預上傳URL傳回前端

3、前端請求該URL，并攜帶檔案上傳至S3

後端代碼

/**
     * AWS預簽名上傳
     * @return
     */
    @GetMapping("/upload")
    public Object generatePreSignedUrl(String fileName){
        Map<String, Object> map = new HashMap<>();
        try {
            AWSCredentials awsCredentials = new BasicAWSCredentials(AWS_ACCESS_KEY, AWS_SECRET_KEY);
            AWSCredentialsProvider awsCredentialsProvider = new AWSStaticCredentialsProvider(awsCredentials);
            AmazonS3 s3Client = AmazonS3ClientBuilder.standard()
                    .withCredentials(new ProfileCredentialsProvider())
                    .withRegion(Regions.CN_NORTH_1)
                    .withCredentials(awsCredentialsProvider)
                    .build();
            java.util.Date expiration = new java.util.Date();
            long expTimeMillis = expiration.getTime();
            expTimeMillis += 1000 * 60 * 30;
            expiration.setTime(expTimeMillis);
            String name = fileName.substring(0,fileName.lastIndexOf("."));
            String fileType = fileName.substring(fileName.lastIndexOf("."));
            String prefixFileName = name+ "_"+String.valueOf(System.currentTimeMillis()).substring(6)+""+fileType;
            Review review = new Review();
            review.setName(name);
            GeneratePresignedUrlRequest generatePresignedUrlRequest = new GeneratePresignedUrlRequest(BUCKET_NAME, prefixFileName)
                    .withMethod(HttpMethod.PUT)
                    .withExpiration(expiration);
            URL url = s3Client.generatePresignedUrl(generatePresignedUrlRequest);
            if(url == null){
                return map;
            }
            // 檔案通路位址
            StringBuilder urlImage = new StringBuilder();
            urlImage.append(url.getProtocol()).append("://").append(url.getHost()).
                    append(URLDecoder.decode(url.getPath(), "UTF-8"));
            // 預簽名put位址
            StringBuilder preUrl = new StringBuilder();
            preUrl.append(url.getProtocol()).append("://").append(url.getHost()).
                        append(URLDecoder.decode(url.getFile(), "UTF-8"));
            map.put("preUrl",preUrl);
            map.put("urlImage",urlImage);
            return map;
        } catch (Exception e) {
            e.printStackTrace();
            return map;
        }
    }
           

前端代碼

import axios from 'axios'
 
                axios.put(preUrl, fileList[0], {
                headers: {
                  'Content-Type': 'multipart/form-data'
                },
                onUploadProgress: progressEvent => {
                  let complete = (progressEvent.loaded / progressEvent.total * 100.).toFixed(2)
                  
                }
              })
                .then((res: any) => {
                  if (res.status == 200) {
                    console.log(res)
                  }
                }).catch(
                  err => {
                    console.log(err)
                  })
           

參考官方文檔：https://docs.aws.amazon.com/AmazonS3/latest/userguide/PresignedUrlUploadObject.html