上篇写了oss上传，这篇写aws上传的方式，因为以前没用过aws上传，公司业务涉及到了海外客户，海外就用aws上传，但这里坑就特别多，先讲讲简单上传吧，aws的参数、方法网上一大堆，官方文档只是简单的案例，真正还是要靠自己探索出来，今天记录一下
1、说一下aws的s3.upload上传方式，这里要引入aws-sdk，引入后部署到dorker上就会报错，然后在index.html引入https://cdn.bootcdn.net/ajax/libs/aws-sdk/2.1167.0/aws-sdk.min.js并没有报错，用webpack的dome测试发现正常，怀疑是vite打包导致的冲突问题
下面是aws的s3.upload上传方式
const credentials = {accessKeyId:awsData.value.accessid, secretAccessKey:awsData.value.secret};
(window as any).AWS.config.update(credentials);
(window as any).AWS.config.region =document.domain.includes('eu') ?awsData.value.cdnDomain:awsData.value.host;? //设置区域
const s3 =new (window as any).AWS.S3();
const params:any = {
? Bucket:awsData.value.bucket,
? Key:awsData.value.dir +'/' +randomString(8) +'_' +Date.now() +'.' +file.value.name.split('.')[file.value.name.split('.').length -1],
? Body:file.value,
? 'Access-Control-Allow-Credentials':'*'
};
percentage.value =0
awsUploadEvent =await s3.upload(params, {}).on('httpUploadProgress', (e:any) => {
let precent = (parseInt(e.loaded, 10) /parseInt(e.total, 10)) *100;
? precent =parseInt(precent.toFixed(2));
? percentage.value = precent;
});
2、aws.upload就仅有这么点代码， 但也弄了很久，因为之前用的不是upload，参数也没有那么少，最后呢，后端开始不再返回secret，就直接put返回的url，这种上传方式，不仅不用引入aws-sdk，也不用在index.html中引入js，简化了步骤，下面来看看
let domain ='';
//把欧服url域名替换为cdn，后端返回的url中包含了bucket和host，要把域名全部替换为cdn加速
if (cdnDomain) {?
domain = url.split('//')[1];
? ? domain = domain.split('/')[0];
? ? url = url.replace(domain, cdnDomain)
}
//请求头配置
const awsConfig = {
headers: {'Content-Type':'multipart/form-data'} //图片可以用这个，但如果是设备的话就要换成二进制的'Content-Type': 'application/octet-stream'
};
//正式上传
let result =new Promise(async (resolve, reject) => {
//aws规定要用put，不能用post
? ? await axios.put(url, file, awsConfig)
.then(res => {
if (res.status ==200) {
? ? ? ? ? ? ? ? resolve(url);
? ? ? ? ? ? }
}).catch(err => {
reject(err)
}
)
})
return result;
不管是oss还是aws，我都推崇第二种方式，在后端签名返回，前端用post或者put上传，就不需要前端引入任何东西。
还有一个手机端用uni-app上传的，也做了封装，因为是uni.chooseImage选择的图片，用的不能是blob链接，这个要记住，用的是他的file，就是res.tempFiles里面的东西，在我的电商项目pages/commonAction/uploadImage里面，这个本来想放到npmjs上的，后来还是没有放上去