js 使用预签名(presigned) url 上传文件到 AWS S3服务（解决生成的文件格式错误问题）_getpresigneduploadurl

• 背景
  项目里有图片上传的需求，具体实现是后端生成presigned url（预签名url，里面包含上传到AWS S3所需要的一些认证标识信息）给到前端，前端通过这个URL将文件上传到云服务上。但是上传成功后，从CDN上下载下来的文件打不开，而且只有前端有这个问题，客户端可以正常上传，一开始以为是框架问题，而且亚马逊官方也没有直接上传相关的文档（都是使用SDK的方式上传），所以问题很难定位，后来在github上找到了方案。
• 相关步骤

1. 从后端获取presigned url ，亚马逊官网有Java、PHP、node等生成presigned url的文档
   
2. 使用presigned url上传图片，前端使用的是element UI + axios， 这里使用的element UI 自定义上传的方式，特别需要注意的就是直接上传文件，不要用formdata的格式上传

HTML部分

 <el-upload
     class="avatar-uploader"
     action="123"
    :http-request="upload"
    :before-upload="beforeAvatarUpload">
    <img v-if="params.defaultImgUrl" :src="params.defaultImgUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
1
2
3
4
5
6
7
8

js 部分

upload(res)
{
    let file = res.file;  //注意：直接上传file文件，不要用FormData对象的形式传
    let config = {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    };
    //从接口获取presigned url
    getUploadUrl({uploadType: 6}).then(res => {
        let result = res.data;

        if (result.code === 0) {
            const info = JSON.parse(result.msg);
            //需要用put方法上传，post会报405，aws官方规定是put方法
            axios.put(info.presignedUrl, file, config)
                .then(res => {
                    if (res.status == 200) {
                        this.params.defaultImgUrl = info.cdnUrl;
                    }
                }).catch(
                err => {
                    console.log(err)
                }
            )
        }
    }).catch(err => {
        console.log('get upload info', err)
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

3. 返回200状态码即表示上传成功
   

• 坑点
  一般图片、文件上传都是使用FormData对象传递二进制文件，所以笔者一开始也是采用的这种方式上传到AWS上，但是上传完之后，下载后的图片无法打开，将其二进制数据与原文件二级制数进行对比，发现有额外的二进制数据
  
  后来在github上找到了解决方案，原来使FormData对象上传文件到aws上会损坏原文件的二进制数据，直接上传文件对象就行

附上参考的解决方案github地址：
https://github.com/aws/aws-sdk-js/issues/547