JS node 后端签名前端文件直传ali-oss解决方案

最新推荐文章于 2025-07-08 11:01:43 发布

原创最新推荐文章于 2025-07-08 11:01:43 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS node 后端签名前端文件直传ali-oss解决方案 #oss后端签名前端文件直传

js 同时被 3 个专栏收录

28 篇文章

订阅专栏

node

7 篇文章

订阅专栏

ali-oss

1 篇文章

订阅专栏

本文介绍了一种使用HTML、JavaScript和Node.js实现跨域文件上传至阿里云OSS的方法。通过前端代码设置文件输入和上传事件，利用FormData发送包含文件和其他必要参数的POST请求。后端使用Node.js处理请求，生成并返回OSS上传所需的策略和签名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：首先打开跨域

上面搞好了开始写代码

html

  <input type="file" id="upload" onchange="uploadfile()">

    function uploadfile() {
        var file = document.getElementById('upload').files[0]
        $.ajax({
            url: '/policy',
            data: '',
            type: 'get',
            dataType: 'json',
            success: function (data) {
                let param = new FormData() // 创建form对象
                param.append('OSSAccessKeyId', data.OSSAccessKeyId)
                param.append('policy', data.policy)
                param.append('key', data.startsWith + data.saveName)
                param.append('success_action_status', 200)
                param.append('signature', data.signature)
                param.append('file', file, data.saveName)
                const xhr = new XMLHttpRequest()
                xhr.open('post', data.host, true)
                xhr.upload.addEventListener('progress', (evt) => {
                    this.progress = Math.round((evt.loaded) * 100 / evt.total)
                }, false)
                xhr.addEventListener('load', (e) => {
                    if (e.target.status !== 200) {
                        console.log(e.target.response)
                        console.log('上传失败！')
                        return
                    }
                    if (e.target.status === 200) {
                        console.log(data.host + '/' + data.startsWith + data.saveName)
                        this.imgUrl = data.host + '/' + data.startsWith + data.saveName
                    }
                }, false)
                xhr.send(param)
            }
        })
    }

node

const crypto = require('crypto');
const path = require('path');
const axios = require('axios');
let oss = {
    OSSAccessKeyId: 'deAIrr6Bkdemo', //上图显示的位置,去获取你自己的ID，下同
    secret: 'bPaJweew3lwaZweiPjeNClsluyUhne33M',//上图显示的位置
    host: 'https://demo.oss-cn-beijing.aliyuncs.com' // //上图显示的位置
};
var policy = async function (ctx, next) {
        const dirPath = 'img/' //bucket 项目里的文件路径
        const {OSSAccessKeyId, host, secret} = oss;
        let end = new Date().getTime() + 360000
        let expiration = new Date(end).toISOString()
        let policyString = {
            expiration,
            conditions: [
                ['content-length-range', 0, 1048576000],
                ['starts-with', '$key', dirPath]
            ]
        }
        policyString = JSON.stringify(policyString)
        const policy = new Buffer(policyString).toString('base64')
        const signature = crypto.createHmac('sha1', secret).update(policy).digest('base64')
        ctx.body = {
            OSSAccessKeyId: OSSAccessKeyId,
            host,
            policy,
            signature,
            saveName: end,
            startsWith: dirPath
        };
}

module.exports = {policy: policy}

OK启动运行

后端启动服务那些我就不贴了，这是功能代码，直接用上