上篇寫了oss上傳甚牲，這篇寫aws上傳的方式焕毫，因?yàn)橐郧皼]用過aws上傳鞠值，公司業(yè)務(wù)涉及到了海外客戶夜赵，海外就用aws上傳填大，但這里坑就特別多牛柒，先講講簡(jiǎn)單上傳吧膏执，aws的參數(shù)悄谐、方法網(wǎng)上一大堆侧但，官方文檔只是簡(jiǎn)單的案例矢空，真正還是要靠自己探索出來，今天記錄一下
1禀横、說一下aws的s3.upload上傳方式屁药，這里要引入aws-sdk，引入后部署到dorker上就會(huì)報(bào)錯(cuò)柏锄，然后在index.html引入https://cdn.bootcdn.net/ajax/libs/aws-sdk/2.1167.0/aws-sdk.min.js并沒有報(bào)錯(cuò)酿箭，用webpack的dome測(cè)試發(fā)現(xiàn)正常，懷疑是vite打包導(dǎo)致的沖突問題
下面是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;? //設(shè)置區(qū)域
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就僅有這么點(diǎn)代碼缭嫡， 但也弄了很久，因?yàn)橹坝玫牟皇莡pload抬闷，參數(shù)也沒有那么少妇蛀，最后呢耕突，后端開始不再返回secret，就直接put返回的url评架，這種上傳方式眷茁，不僅不用引入aws-sdk，也不用在index.html中引入js纵诞，簡(jiǎn)化了步驟上祈，下面來看看
let domain ='';
//把歐服url域名替換為cdn，后端返回的url中包含了bucket和host浙芙，要把域名全部替換為cdn加速
if (cdnDomain) {?
domain = url.split('//')[1];
? ? domain = domain.split('/')[0];
? ? url = url.replace(domain, cdnDomain)
}
//請(qǐng)求頭配置
const awsConfig = {
headers: {'Content-Type':'multipart/form-data'} //圖片可以用這個(gè)登刺，但如果是設(shè)備的話就要換成二進(jìn)制的'Content-Type': 'application/octet-stream'
};
//正式上傳
let result =new Promise(async (resolve, reject) => {
//aws規(guī)定要用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上傳晤锥，就不需要前端引入任何東西。
還有一個(gè)手機(jī)端用uni-app上傳的廊宪，也做了封裝矾瘾，因?yàn)槭莡ni.chooseImage選擇的圖片，用的不能是blob鏈接箭启，這個(gè)要記住壕翩，用的是他的file，就是res.tempFiles里面的東西傅寡，在我的電商項(xiàng)目pages/commonAction/uploadImage里面放妈，這個(gè)本來想放到npmjs上的，后來還是沒有放上去
