寫這篇文章之前，我也是剛剛實現COS上傳和顯示圖片。我百度了好多相關文章，COS上傳圖片成功的文章不少，上傳后顯示圖片的文章幾乎沒有。於是寫一篇記錄下。
COS上傳圖片推薦鏈接：https://blog.csdn.net/qq_41485414/article/details/80134908。這個作者寫的很好，我按照他的一步步走，成功實現了上傳圖片。
這里以騰訊雲COS上傳為例，記錄上傳圖片和顯示圖片過程。
騰訊雲 COS JS SDK 地址：https://github.com/tencentyun/cos-js-sdk-v5
步驟：
1、下載騰訊雲 COS JS SDK的demo。安裝依賴。執行npm i 發現下載不了，按照package.json文件的依賴包 手動下載。 官網里寫的很清楚如何配置。例子都放到demo文件夾了。先運行下官網的demo查看下基本配置。自己重新生成了一個test-sh.html。本地訪問：http://127.0.0.1:3000/demo/test-sh.html。默認的是3000端口。node啟動服務：node server/sts.js 。服務器接口是http://127.0.0.1:3000/sts。
test-sh.html完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../dist/cos-js-sdk-v5.min.js"></script>
<style>
body{
background:#ccc
}
</style>
</head>
<body>
<input id="file-selector" type="file">
<img id="imgupload" src="" alt="">
<img id="img" src="" alt="">
</body>
</html>
<script>
var Bucket = '';//demo必需 騰訊雲獲取
var Region = '';//demo必需 騰訊雲獲取
// 初始化實例
var cos = new COS({
getAuthorization: function (options, callback) {
var url = 'http://127.0.0.1:3000/sts'; // 這里替換成您的服務接口地址
// var url = '../server/sts.php'; // 這里替換成您的服務接口地址
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function (e) {
try {
var data = JSON.parse(e.target.responseText);
} catch (e) {
}
console.log(data)
callback({
TmpSecretId: data.credentials && data.credentials.tmpSecretId,
TmpSecretKey: data.credentials && data.credentials.tmpSecretKey,
XCosSecurityToken: data.credentials && data.credentials.sessionToken,
ExpiredTime: data.expiredTime,
});
};
xhr.send();
}
});
// 監聽選文件
document.getElementById('file-selector').onchange = function () {
var file = this.files[0];
if (!file) return;
//上傳
cos.putObject({
Bucket: Bucket, /* 必須 */
Region: Region, /* 存儲桶所在地域，必須字段 */
Key: file.name, /* 必須 */
StorageClass: 'STANDARD',
Body: file, // 上傳文件對象
onProgress: function(progressData) {
console.log(JSON.stringify(progressData));
}
}, function(err, data) {
console.log(err || data);
//將來在這里寫顯示圖片
});
};
</script>
2、顯示在頁面中。需要改兩處。
一處是server/sts.js。里面默認沒有配置獲取圖片地址的權限（如果不添加權限，會返回403的錯誤）。server/sts.js中config的 allowActions 新增'name/cos:GetObjectUrl'權限。
一處是在頁面中調用cos.getObjectUrl（獲取圖片），不是cos.getObject（獲取文件） 哦。
//server/sts.js的config的 allowActions 新增'name/cos:GetObjectUrl'
var config = { secretId: '',//必填 在騰訊雲找到雲api密鑰 改成自己的 secretKey: '',//必填 在騰訊雲找到雲api密鑰 改成自己的 proxy: process.env.Proxy, durationSeconds: 1800, bucket: '',//必填 和html的bucket一樣 是cos的存儲桶信息 都改成自己的 region: '',//必填 和html的region一樣 是cos的域名信息 都改成自己的 //allowPrefix: '_ALLOW_DIR_/*', allowPrefix: '*', // 密鑰的權限列表 allowActions: [ // 所有 action 請看文檔 https://cloud.tencent.com/document/product/436/31923 // 簡單上傳 'name/cos:GetObject',//新加權限 demo里默認沒有 'name/cos:GetObjectUrl',//新加權限 demo里默認沒有 'name/cos:PutObject', 'name/cos:PostObject', // 分片上傳 'name/cos:InitiateMultipartUpload', 'name/cos:ListMultipartUploads', 'name/cos:ListParts', 'name/cos:UploadPart', 'name/cos:CompleteMultipartUpload' ], };
//test-sh.html 在上傳圖片成功后的回調函數里加入如下代碼
cos.getObjectUrl({ Bucket: Bucket, Region: Region, Key: file.name, Sign: true }, function (err, data) { console.log(err || data.Url); document.getElementById('imgupload').src=data.Url; });
3、瀏覽器打開 上傳一張圖片后 圖片也顯示成功了。
當然 如果知道已上傳過的圖片名稱，可以直接請求。
cos.getObjectUrl({ Bucket: Bucket, Region: Region, Key: 'music.png', Sign: true }, function (err, data) { console.log(err || data.Url); document.getElementById('imgupload').src=data.Url; });
在網上也看到另外一種展示圖片的方法，但是個人不推薦。
方法：需要將對象權限變成公有讀私有寫。
詳情鏈接：https://developers.weixin.qq.com/community/develop/doc/000e04c61347808e6e7660e1f51800
弊端：針對已經上傳的圖片才能設置。且新傳入圖片后還需要再次修改。