Vue Element UI + OSS实现上传文件功能
前端  /  管理员 发布于 4年前   594
Element提供了upload上传组件,可以查看官网upload组件的详细介绍;查看upload组件的上传源码upload/ajax,使用的是XHR对象上传文件。在项目实践中,发现该上传方法上传大文件时会出现问题,所以决定使用阿里云对象存储服务(Object Storage Service,简称OSS),OSS详细介绍可以查看官网,本文主要讲解的是OSS上传文件的前端,后台开发请查看官网介绍,SDK Browser.js讲解了前端如何进行上传。
1、使用npm安装SDK的开发包:
npm install ali-oss
2、OSS配置
let OSS = require('ali-oss');let client= new OSS.Wrapper({ accessKeyId: 'your access key', accessKeySecret: 'your access secret', bucket: 'your bucket name', region: 'oss-cn-hangzhou'});
最新版的没有了Wrapper构造函数,直接配置
let oss = require('ali-oss');var client = oss({ accessKeyId: 'your access key', accessKeySecret: 'your access secret', bucket: 'your bucket name', region: 'oss-cn-hangzhou'});
3、上传文件
OSS上传文件分为上传Buffer内容、上传blob数据、分片上传,此处展示分片上传
let result = await client.multipartUpload('object-key', 'local-file', { progress: async function (p) { console.log('Progress: ' + p); } });
js调用OSS上传文件已经没有问题,但是我们需要实现公用上传组件,Element UI已经实现了Upload上传组件,包括上传进度、异常处理、拖拽等;那我们还有必要重新开发一个像Upload一样的组件吗?通过查看Upload组件的API发现有一个http-request属性,http-request覆盖默认的上传行为,可以自定义上传的实现;看到这个我就省了很多事,直接用OSS上传覆盖XHR上传。代码如下:
将文件拖到此处,或点击上传上传文件大小不能超过 1G查看upload源码upload.vue知道httpRequest会有一个文件上传的option选项作为参数,upload/ajax源码中上传进度、上传成功、上传失败都是通过option调用其方法进行触发。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
- vue+element-ui+axios实现图片上传
- Vue + Element UI图片上传控件使用详解
- vue+elementUI实现图片上传功能
- vue+elementUi图片上传组件使用详解
- vue+elementUI实现表单和图片上传及验证功能示例
- vue-cli3.0+element-ui上传组件el-upload的使用
- 在vue项目中使用element-ui的Upload上传组件的示例
- vuejs+element-ui+laravel5.4上传文件的示例代码
- Vue+Element-UI实现上传图片并压缩
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号