微客导航 » 文章资讯 » Vue Element UI + OSS实现上传文件功能

Vue Element UI + OSS实现上传文件功能

2023-08-18 08:34:04 176

Element提供了upload上传组件，可以查看官网upload组件的详细介绍；查看upload组件的上传源码upload/ajax，使用的是XHR对象上传文件。在项目实践中，发现该上传方法上传大文件时会出现问题，所以决定使用阿里云对象存储服务（ObjectStorageService，简称OSS），OSS详细介绍可以查看官网，本文主要讲解的是OSS上传文件的前端，后台开发请查看官网介绍，SDKBrowser.js讲解了前端如何进行上传。

1、使用npm安装SDK的开发包：

npminstallali-oss

2、OSS配置

letOSS=require('ali-oss');
letclient=newOSS.Wrapper({
accessKeyId:'youraccesskey',
accessKeySecret:'youraccesssecret',
bucket:'yourbucketname',
region:'oss-cn-hangzhou'
});

最新版的没有了Wrapper构造函数，直接配置

letoss=require('ali-oss');
varclient=oss({
accessKeyId:'youraccesskey',
accessKeySecret:'youraccesssecret',
bucket:'yourbucketname',
region:'oss-cn-hangzhou'
});

3、上传文件

OSS上传文件分为上传Buffer内容、上传blob数据、分片上传，此处展示分片上传

letresult=awaitclient.multipartUpload('object-key','local-file',{
progress:asyncfunction(p){
console.log('Progress:'+p);
}
});

js调用OSS上传文件已经没有问题，但是我们需要实现公用上传组件，ElementUI已经实现了Upload上传组件，包括上传进度、异常处理、拖拽等；那我们还有必要重新开发一个像Upload一样的组件吗？通过查看Upload组件的API发现有一个http-request属性，http-request覆盖默认的上传行为，可以自定义上传的实现；看到这个我就省了很多事，直接用OSS上传覆盖XHR上传。代码如下：

查看upload源码upload.vue知道httpRequest会有一个文件上传的option选项作为参数，upload/ajax源码中上传进度、上传成功、上传失败都是通过option调用其方法进行触发。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Vue Element UI + OSS实现上传文件功能

热门推荐

随机推荐