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]