vue 版本 上传文件直传阿里云OSS

Web端PostObject直传实践简介

开发场景:

       每个OSS用户都会用到上传服务。Web端常见的上传方法是用户在浏览器或APP端上传文件到应用服务器,应用服务器再把文件上传到OSS。这种方式需通过应用服务器中转,传输效率明显低于数据直转至OSS的方式。

本文主要为:在客户端通过JavaScript代码完成签名,然后通过表单直传数据到OSS。详情请参见JavaScript客户端签名直传

关于详细的说明文档请至 阿里云官方文档

详细代码在文本超链接 GitHub中

准备工作:

1、项目搭建(本文使用的vue3.0脚手架)

2、查看官方文档 下载浏览器客户端代码,根据文档教程进行测试预览

官方教程示例图:

个人开发历程:

部门以往的项目中,上传OSS均通过应用服务器上传然后再上传到OSS,根据经理要求,通过web端根据服务器返回的签名等信息实现直接上传。

过程1、down官方html代码,更换签名等配置信息实现图片的上传测试。(成功)

过程2、本着前人种树后人乘凉,直接网络搜索关于 vue web直传oss的类似文章。发现大同小异,均是先进行安装 ali-oss、ali-oss-web 依赖包或者是直接script标签引入阿里的sdk 。但是经过对比,发现每个方法最终的oss示例对象都不一致,并且经过测试,出现了各种报错;

过程3、自己动手丰衣足食,直接撸官方代码,简单暴力,无脑操作。

  • 1、直接修改初始化vue脚手架项目的 helloword 组件为vueToOss 并更换代码为官方代码的body内容。下面附代码;
  • 2、讲script引入的js进行汇总统一放在跟目录utils下,在vueToOss中引入utils 下的js。特别注意一点,引入js后控制台会各种报错,提示很多方法 is not define,此时去修改utils下对应的js的输出方式,“export default xxxx”
  • 3、核心js plupload的引入,由于是基于plupload的封装,示例代码中直接引入的是min.js代码,直接引入无效,故直接查找了下 npm的依赖包,点击超链接查看安装方式。如上图所示引入该文件即可;
  • 4、改造上传方法的upload.js,处理控制台报错,并且修改下图所示时间为有效期

核心代码:

点击跳转github ,如果有帮助,可以start一下。

 

 

发布了36 篇原创文章 · 获赞 23 · 访问量 10万+
App 阅读领勋章
微信扫码 下载APP
阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览