本文主要介绍如何在vue项目中使用web直传方式上传阿里云oss图片，默认读者对vue框架和阿里云oss有一定的了解，整体的流程是加载好阿里云sdk -> 初始化上传客户端client -> 等待文件选择 -> 文件选择进行上传 -> 分发上传结果
使用过程中我碰到以下的坑：
1. 本文使用的是js引入形式的阿里云sdk，用npm形式的sdk会需要一些后端的node功能，不能用于web直传。
可以直接在html里面加上script标签
登录后复制
组件里我包装了一个异步获取sdk的方法LoadJS，感兴趣的可以看一下
2. 使用js引入形式的sdk会有一个异步的问题，就是client初始化的时候sdk可能还没加载好，我是在vue的mouted钩子函数内设置了一个定时器，当SDK加载的完成之后再来初始化client
let timer = setInterval(() => { if (window.OSS) { this.init() clearInterval(timer) timer = null this.debug && window.console.log('阿里云oss初始化完成') } else { this.debug && window.console.log('阿里云oss初始化中...') }}, 500)
登录后复制
3. 如果你的项目是https环境下的，需要保证初始化client的时候配置secure为true，不然无法上传文件
4. 在默认情况下，保存的图片名会取一个随机的字符串，但是同一张图片多次上传就会保存多个相同图片，这边我做了一个优化，将图片的大小和高宽拼接成一个字符串，再对这个字符串进行md5 hash化处理，这样同一张图片上传多次也只会保存一张
相关推荐：
浅谈 上传组件 核心架构设计
立即学习“前端免费学习笔记（深入）”；
php 多文件上传组件_PHP教程
JS上传组件FileUpload自定义模板的使用方法_javascript技巧
以上就是vue阿里云上传组件详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2788220.html
