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

前言：

为了减轻服务器压力，采用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 OSSAccessKeyId = "OSSAccessKeyId"  // 服务器端同事调oss的API，通过接口返回给前端的 OSSAccessKeyId
        const callback = "callback"  // 服务器端同事调oss的API，通过接口返回给前端的 callback。这个是需要 oss 触发这个回调来通知服务器操作结果。
        const signature = "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 进入我的插件库，我不喜欢被强迫。