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

2019-06-14 admin

前言:

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

[转载]原文链接:https://segmentfault.com/a/1190000019481380

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67307.html

文章标题:oss web直传 服务器签名 - vue版本

相关文章
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { &quot;list&quot;: [ { pagePath: &quot;pages&#x2F;index&#x2F;main&quot;, iconPath: &...
2018-05-25
回到顶部