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

jiezi

5 年前

为了减轻服务器压力，采用 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 进入我的插件库，我不喜欢被强迫。

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

前言：

开始：

结束：