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

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

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

1:首先打开跨域

上面搞好了开始写代码

html

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

js

    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启动运行

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值