AWS S3 上傳文件

一、獲取簽名的URL

 通過后端給的接口拿到已經簽名好的文件上傳的URL地址

二、讀取文件（注：AWS 接受的二進制，不能使用form-data）

 // 獲取文件二進制
    getFileMd5 = (key: string,callback: (value: any)=>void) => {
        const log: any = document.getElementById(key)
        const file = log.files[0]

        const reader = new FileReader();

        reader.onload =  () => {
            // console.log(reader.result);
            callback(reader.result)
        }
        reader.readAsBinaryString(file)
    }

　　要在onload中去執行后續操作，reader.result返回文件的二進制

三、提供接口所需要的header參數以及文件參數

req.setRequestHeader('Content-MD5',md5Base64);
 req.setRequestHeader('x-amz-acl', 'public-read');

md5Base64 是文件的二進制轉base64后的值
1、使用spark-md5將文件轉為hash的二進制

import SparkMD5 from 'spark-md5'

const binaryFile = SparkMD5.hashBinary(fileValue,true)
// fileValue 為上面讀取文件的二進制值

　　2、使用base64將二進制轉為base64

import Base64 from 'base-64'
  const md5Base64 = Base64.encode(binaryFile)
// binaryFile 為上面的二進制文件

四、拿到所有所需參數發送請求

 $.ajax({
            url,
            type: "PUT",
            data: file, // 源文件

            beforeSend: (req) => {
                req.setRequestHeader('Content-MD5',md5Base64);
                req.setRequestHeader('x-amz-acl', 'public-read');
            },
            processData: false, // 不想轉換數據的時候，需要手動將其設置為false
            contentType: false, // 不設置content-type
            success:(res) => {
                console.log('res',res)
                   const obj: any = {}
                   // 圖片上傳成功
                   switch(key) {
                       case 'mb_banner':
                           message.success('banner-mb圖片上傳成功！')
                            obj.mobile_banner_url = url.split('?')[0]
                            break
                       case 'pc_banner':
                            message.success('banner-pc圖片上傳成功！')
                            obj.banner_url = url.split('?')[0]
                            break
                       case 'icon':
                            message.success('分享icon圖片上傳成功！')
                            obj.icon_url = url.split('?')[0]
                            break
                       default: 
                           break
                   }
                   this.props.setBannerImg(obj)

            },error: err => {
                switch(key) {
                    case 'mb_banner':
                        message.error('banner-mb圖片上傳失敗！')
                        break
                    case 'pc_banner':
                         message.error('banner-pc圖片上傳失敗！')
                         break
                    case 'icon':
                         message.error('分享icon圖片上傳失敗！')
                         break
                    default: 
                        break
                }
                console.log(err)
            }
        });

　　file：　//let inputfile: any = document.getElementById(key)

　　　　inputfile = inputfile.files[0]