Vue Element UI + OSS实现上传文件功能 实现上传文件功能 主要为大家详细介绍了Vue Element UI + OSS实现上传文件功能，具有一定的参考价值，感兴趣的小伙伴们可 以参考一下 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调用其方法进行触发。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。