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 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 进入个人插件库，我不喜欢被强迫。