赞
踩
背景
项目里有图片上传的需求,具体实现是后端生成presigned url(预签名url,里面包含上传到AWS S3所需要的一些认证标识信息)给到前端,前端通过这个URL将文件上传到云服务上。但是上传成功后,从CDN上下载下来的文件打不开,而且只有前端有这个问题,客户端可以正常上传,一开始以为是框架问题,而且亚马逊官方也没有直接上传相关的文档(都是使用SDK的方式上传),所以问题很难定位,后来在github上找到了方案。
相关步骤
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>
- 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)
- })
- }
一般图片、文件上传都是使用FormData对象传递二进制文件,所以笔者一开始也是采用的这种方式上传到AWS上,但是上传完之后,下载后的图片无法打开,将其二进制数据与原文件二级制数进行对比,发现有额外的二进制数据
附上参考的解决方案github地址:
https://github.com/aws/aws-sdk-js/issues/547
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。