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


Posted in Javascript onJuly 31, 2019

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

<template>
 <div>
 <el-upload
 :auto-upload="false"
 :action="uploadUrl"
 ref="upload"
 :before-upload="fnBeforeUpload"
 :on-success="fnUploadSuccess"
 :on-exceed="fnUploadExceed"
 :data="data_extra"
 :headers="uploadHeaders"
 :http-request="fnUploadRequest"
 drag
 :limit="files"
 :disabled="disabled"
 multiple>
 <i class="el-icon-upload"></i>
 <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
 <div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
 </el-upload>
 </div>
</template>
<script>
import UploadFileApi from '@/api/system/UploadFileApi'
import * as util from 'utils/common'
import OSS from 'ali-oss'
export default {
 name: 'fileUpload',
 props: {
 data_extra: {
 type: Object,
 required: true
 },
 accept: {
 type: Array,
 required: true
 }
 },
 data () {
 return {
 uploadUrl: '',
 uploadFileLength: 0,
 uploadFileSuccess: 0,
 uploadFileNames: [],
 uploadFileName: [],
 fileList: [],
 files: 10,
 uploadHeaders: {
 authorization: ''
 },
 disabled: false
 }
 },
 methods: {
 /**
 * @description [fnUploadRequest 覆盖默认的上传行为,实现自定义上传]
 * @author shanshuizinong
 * @param {object} option [上传选项]
 * @return {null} [没有返回]
 */
 async fnUploadRequest (option) {
 try {
 let vm = this
 vm.disabled = true
 // 获取OSS配置信息
 let uploadFileApi = new UploadFileApi()
 let ret = await uploadFileApi.fileOssParams()
 if (!(ret.data && ret.data.code === '0' && ret.data.data)) {
  throw new Error('获取OSS参数失败')
 }
 let ossData = JSON.parse(ret.data.data)
 let relativePath = ossData.relativePath
 let client = new OSS.Wrapper({
  policy: ossData.policy,
  accessKeyId: ossData.accessid,
  accessKeySecret: ossData.accesssecret,
  bucket: ossData.bucket,
  signature: ossData.signature
 })
 let file = option.file
 const point = file.name.lastIndexOf('.')
 let suffix = file.name.substr(point)
 let fileName = file.name.substr(0, point)
 let date = vm.$moment().format('YYYYMMDDHHmm')
 let fileNames = `${fileName}_${date}${suffix}`
 // 分片上传文件
 ret = await client.multipartUpload(relativePath + fileNames, file, {
  progress: async function (p) {
  let e = {}
  e.percent = p * 100
  option.onProgress(e)
  }
 })
 console.log(ret)
 if (ret.res.statusCode === 200) {
  // option.onSuccess(ret)
  return ret
 } else {
  vm.disabled = false
  option.onError('上传失败')
 }
 } catch (error) {
 console.error(error)
 this.disabled = false
 option.onError('上传失败')
 this.$error(error.message)
 }
 },
 /**
 * @description [fnUploadSuccess 文件上传成功的函数]
 * @author shanshuizinong
 * @return {null} [没有返回]
 */
 async fnUploadSuccess () {
 // TODO
 }
 }
}
</script>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
微信小程序支付前端源码
Aug 29 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
原生js代码能实现call和bind吗
Jul 31 #Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 #Javascript
javascript中undefined的本质解析
Jul 31 #Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 #Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 #Javascript
js实现一个简易计算器
Mar 30 #Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 #Javascript
You might like
Syphon 使用方法
2021/03/03 冲泡冲煮
基于PHP创建Cookie数组的详解
2013/07/03 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
Python+微信接口实现运维报警
2016/08/27 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
python实现数字炸弹游戏程序
2020/07/17 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
python-地图可视化组件folium的操作
2020/12/14 Python
英国大码女性时装零售商:Evans
2018/08/29 全球购物
电气自动化个人求职信范文
2014/02/03 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
优秀食品类广告词
2014/03/19 职场文书
干部对照检查材料范文
2014/08/26 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
工程部部长岗位职责
2015/02/12 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL