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

爱被打了一巴掌 2022-04-24 04:04 259阅读 0赞

1：首先打开跨域

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTYzNTcx_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTYzNTcx_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTYzNTcx_size_16_color_FFFFFF_t_70 2][]

上面搞好了开始写代码

html

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTYzNTcx_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTYzNTcx_size_16_color_FFFFFF_t_70 4][]

OK启动运行

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTYzNTcx_size_16_color_FFFFFF_t_70]: /images/20220220/bdeb5f220101499eab3a5f014da39b91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTYzNTcx_size_16_color_FFFFFF_t_70 1]: /images/20220220/41c292fb7bfa4d6f83bf26ffe9232684.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTYzNTcx_size_16_color_FFFFFF_t_70 2]: /images/20220220/320f36a60fde461fa1a691a963b9bda5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTYzNTcx_size_16_color_FFFFFF_t_70 3]: /images/20220220/47c732b295f148d89e1f2ed845bb1708.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTYzNTcx_size_16_color_FFFFFF_t_70 4]: /images/20220220/764193ea64fb471ca496d272885ce587.png