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 相关文章推荐
javascript之函数直接量(function(){})()
Jun 29 Javascript
javascript 时间比较实现代码
Oct 28 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
vue 封装面包屑组件教程
Nov 16 Javascript
原生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
php中用foreach来操作数组的代码
2011/07/17 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
Python中的lstrip()方法使用简介
2015/05/19 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python实现输入数字的连续加减方法
2018/06/22 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
大学毕业生自荐书怎么写?
2014/01/06 职场文书
大学生英语演讲稿
2014/04/24 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android