vue+axios配合php实现OSS直传

OSS直传遇到的问题

前两天做项目的时候用到了oss浏览器直传,遇到了以下几个问题,在此做个记录:

分析了阿里云的浏览器直传案例之后,我发现这种方式需要使用post对oss地址进行文件上传,请求体至少需要以下几个信息:key,policy,OSSAccessKeyId,success_action_status,signature,file等6个键值。向后台请求的ajax接口应返回的信息为:

{
    accessid,//即OSSAccessKeyId
    host,//需要请求的oss地址
    policy,//经过base64编码的字符串信息
    signature,//加密信息
    expire,//该请求的加密有效时长
    callback,//上传回调,前端无需例会
    dir//上传文件的目录,不能以/开头,结尾最好有/
}

要特别注意后台传回来的dir,不能以/开头,否则使用post上传时会一直出现key值不合法的错误信息。另外,dir结尾最好有/,否则前端还需自行加入。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
【资源说明】 1、基于SSM+VUE+mysql的 B2C 在线电商项目源码+项目说明.zip 2、该资源包括项目的全部源码,下载可以直接使用! 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 基于SSM+VUE+mysql的 B2C 在线电商项目源码+项目说明.zip ## YMall ## 开发环境 - 操作系统:Windows 10 Enterprise - 开发工具:Intellij IDEA - 数据库:MySQL 8.0.13 - Java SDK:Oracle JDK 1.8.152 ## 项目管理工具 - 项目构建:Maven - 代码管理:Git ## 后台主要技术栈 - 核心框架:Spring + Spring MVC + MyBatis - 数据库连接池:Alibaba Druid - 数据库缓存:Redis - 接口文档引擎:Swagger2 RESTful 风格 API 文档生成 - 全文检索引擎:Elasticsearch - 系统任务调度:Quartz ## 前后分离 - 前端框架:NodeJS + Vue + Axios - 前端模板:ElementUI ## 项目截图 ### YMall 商城前台 - 首页 ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/首页.png) ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/首页-1.png) ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/首页-2.png) - 分类商品页 ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/分类商品页.png) - 商品详情页 ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/商品详情页-1.png) ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/商品详情页-2.png) - 购物车 ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/购物车.png) - 下单 ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/下单-1.png) ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/下单-2.png) - 支付 ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/支付-1.png) ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/支付-2.png) - 会员中心-我的订单 ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/会员中心-1.png) ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/会员中心-1-1.png) - 会员中心-账号资料 ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/会员中心-2.png) - 会员中心-修改地址 ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/会员中心-3.png) - 注册 ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/注册.png) - 登录 ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/登录.png) - 忘记密码 ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/忘记密码.png) ### YMall 商城后台 - 首页 ![](https://yuu-blog.oss-cn-shenzhen.aliyuncs.com/后台首页.png) ## 项目部署 ### 1. 运行项目所需环境 - JDK 1.8 - IDEA - MySQL 5.5 以上 - Tomc

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值