前端不经过后端直接上传图片到oss
程序员文章站
2024-03-24 11:33:40
...
前端不经过后端直接上传图片到oss
在以前开发中，一般来说图片上传都是我们前端转成base64后直接通过接口的方式直接传给后端，但是今天我们遇到一个问题，如果通过接口的方式传给后端，在让后端将我们传过去的图片传到oss上去，那么这样就会很麻烦，大大的增加了服务器的压力，所以今天我们要解决的就是这个问题。那么我们如何解决这个问题，很简单，只需要我们前端不经过后台直接将图片上传到oss上去就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入oss的sdk -->
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js"></script>
</head>
<body>
<input type="file" id="inputFile">
</body>
<script>
var inputFile = document.getElementById("inputFile");
let client = new OSS({
// region以杭州为例（oss-cn-hangzhou），其他region按实际情况填写。
region: '<Your region>',
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
accessKeyId: '<Your AccessKeyId>',
accessKeySecret: '<Your AccessKeySecret>',
bucket: 'Your bucket name'
});
async function putObject(fileName, data) {
try {
// object-key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
let result = await client.put(fileName, data);
console.log(result);
} catch (e) {
console.log(e);
}
}
inputFile.onchange = function () {
const data = inputFile.files[0];
var fileName = data.name;
putObject(fileName, data);
}
</script>
</html>
上一篇： J2ME的RMS
推荐阅读