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上传。代码如下：

查看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实现上传图片并压缩