前端不经过后端直接上传图片到oss

最新推荐文章于 2024-05-06 10:14:20 发布

全栈进阶中........

最新推荐文章于 2024-05-06 10:14:20 发布

阅读量3.7k

点赞数 2

文章标签： js

本文链接：https://blog.csdn.net/weixin_45581741/article/details/108318170

版权

前端不经过后端直接上传图片到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>

阿里云oss文档

全栈进阶中........

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
7
评论
前端不经过后端直接上传图片到oss

前端不经过后端直接上传图片到oss在以前开发中，一般来说图片上传都是我们前端转成base64后直接通过接口的方式直接传给后端，但是今天我们遇到一个问题，如果通过接口的方式传给后端，在让后端将我们传过去的图片传到oss上去，那么这样就会很麻烦，大大的增加了服务器的压力，所以今天我们要解决的就是这个问题。那么...
复制链接

扫一扫