oss web直传 服务器签名 - vue版本

1

前言:

为了减轻服务器压力,采用web直传的方式,直接把资源(图片,文件,视频等)上传到阿里云oss服务器。但是阿里只提供 plupload.js 环境下的 demo,看着脑壳生疼。顿时觉得xx云无耻至极,极度不友好。原本这个事情没必要浪费时间写一篇博客来记录,这下好了,坑够大,为减少广大前端朋友少踩坑,请往下看。

开始:

我当时用vue做的demo,其实是互通的。angular,react自己思考。废话不多说,直接上代码

// vue 采用的是 axios 环境发起的 post 请求,其实就一个函数搞定,如下。
methods: {
    upload(e){
        // 先准备好 oss 服务器需要的内容
        const photo = window.URL.createObjectURL(e.target.files[0])  // 获取图片对象
        const photoName = photo.name  // 原图片的名称
        const key = "photoNameOss"  // 存储到oss的图片名称 自己定,必须确保唯一性,不然会覆盖oss中原有的文件
        const policy = "policy"  // 服务器端同事调oss的API,通过接口返回给前端的 policy
        const policy = "OSSAccessKeyId"  // 服务器端同事调oss的API,通过接口返回给前端的 OSSAccessKeyId
        const policy = "callback"  // 服务器端同事调oss的API,通过接口返回给前端的 callback。这个是需要 oss 触发这个回调来通知服务器操作结果。
        const policy = "signature"  // 服务器端同事调oss的API,通过接口返回给前端的 signature。这个就是签名,最关键的。
        const url = `http://${自己的域名}.oss-cn-beijing.aliyuncs.com`
        
        // biu一下,提交给oss
        let param = new FormData(); 
        param.append('name', `${photoName}`)
        param.append('key', `${key}`)
        param.append('policy', `${policy}`)
        param.append('OSSAccessKeyId', `${OSSAccessKeyId}`)
        param.append('success_action_status', 200)  // 不要问为什么,照做
        param.append('callback', `${callback}`)
        param.append('signature', `${signature}`) 
        param.append('file', photo, photoName); // 这个**切记**一定要放到最后去 append ,不然阿里云会一直报 key 的错误
        axios.post(url, param)
            .then(response => {
                console.log("response == ", response)
            })
            .catch((err) => {
                console.log("err == ", err)
            })
    }
}

一定要记住那个 切记 ,一定要把文件对象 append 到最后,一定不要忘记,这个地方我卡了2小时。

vue 的 template 的使用如下

<input class="input-file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="upload" />

结束:

这样就搞定了。 是不是一点都不难? 总比被人强迫使用 plupload.js 强吧! 这辈子我都不会让 plupload.js 进入我的插件库,我不喜欢被强迫。

你可能感兴趣的

wzzzw · 10月7日

麻烦问一下,我也是这样想将图片提交到oss,但是就会报403的错误
OPTIONS http://wuji.oss-cn-beijing.al... 403 (Forbidden)
Access to XMLHttpRequest at 'https://wuji.oss-cn-beijing.a...' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
您遇到过这种问题吗?

回复

载入中...