摘要：前言为了减轻服务器压力，采用直传的方式，直接把资源图片，文件，视频等上传到阿里云服务器。这个是需要触发这个回调来通知服务器操作结果。服务器端同事调的，通过接口返回给前端的。这个就是签名，最关键的。的的使用如下结束这样就搞定了。
前言：
为了减轻服务器压力，采用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 的使用如下
结束：这样就搞定了。 是不是一点都不难？ 总比被人强迫使用 plupload.js 强吧! 这辈子我都不会让 plupload.js 进入我的插件库，我不喜欢被强迫。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104687.html
摘要：和数据直传到相比，以上方法有三个缺点上传慢。端向服务端请求签名，然后直接上传，不会对服务端产生压力，而且安全可靠。规定返回数据的格式，当前默认返回图片信息宽度高度，可获取更多数据。 背景 每个OSS的用户都会用到上传服务。Web端常见的上传方法是用户在浏览器或app端上传文件到应用服务器，然后应用服务器再把文件上传到OSS。 showImg(https://segmentfault.c...
摘要：一准备工作开通阿里云服务，从控制台上获取和。参考资料阿里云官方文档开始使用阿里云官方文档介绍如何在中快速使用访问服务微信公众号图片上传至阿里云前端图片直传试验如何基于和，快速搭建音视频文件上传服务声明转发请注明出处，谢谢 一、准备工作 1. 开通阿里云OSS服务，从控制台上获取AccessKeyId和AccessKeySecret。 2. 创建Bucket，并登录OSS控制台 3. 配...
摘要：我们通过这个去解决该文章主要介绍如何获取和这两个参数首先下载直传的案例解压后打开里面的完成后就可以用浏览器打开按下点到选项，效果如图我们随便选择一个图片上传然后配合来解决图片上传 我们通过aliyun-oss-web这个npm去解决 该文章主要介绍如何获取 imgSignature 和 imgPolicy 这两个参数 首先下载 web直传的案例 ： http://files.cnblo...
摘要：但是，这里还是为大家提供加密的链接有问题大家一起讨论，欢迎评论，点赞，收藏。 废话不多说直接上代码：（看到的一篇php上传博客，进行的修改完善） .filePicker { margin: 50px; width: 200px; height: 50px; ...
阅读 2681·2021-10-08 10:12
阅读 3660·2021-09-22 15:45
阅读 2337·2019-08-30 15:52
阅读 2461·2019-08-29 18:44
阅读 2479·2019-08-29 12:37
阅读 927·2019-08-26 13:36
阅读 2394·2019-08-26 13:34
阅读 1245·2019-08-26 12:20
