iView文件上传(OSS直传)

前言:

前期项目中使用了第三方的开源UI框架 View UI(前期叫 iView)。总体感觉该UI框架还是比较不错的。但是现在View UI商业化了,部分功能需要付费才能使用。近期做的功能模块需要上传文件,就想到UI中的Upload上传 模块,思前想后决定用它来实现文件上传。
之所以选用UI自身的文件上传,主要是因为其可配置,还有上传进度条。本次文件上传因为要涉及到大文件上传,上传等待时间有点长,为了实时显示上传的进度,故采用Upload上传,其自身带有可配置的上传进度条以及上传文件列表,正好可以满足我的需求。

需求:

此次文件上传需要直传递(OSS)到阿里云服务器。但是官方给的实例中,没有涉及到OSS文件上传的相关配置,为了达到实现OSS直传的目的,现借助已有案例Demo来进一步的改写,实现upload上传文件到阿里云服务器。

<Form ref="voteForm" :model="voteForm" :label-width="120">
	<FormItem label="上传附件">
		<!-- 附件链接地址 -->
		<input type="hidden" v-model.trim="voteForm.filePath" />
		<!-- Upload上传 -->
		<Upload 
			:disabled="loading" 
			:action="upAction" 
			:data="upData" 
			:format="upFormat" 
			:before-upload="beforeUpload"
			:on-success="onSuccess" 
			:on-error="onError" 
			:on-remove="onRemove" 
			:on-format-error="onFormatError"
			:default-file-list="defaultFile"
		>
			<Button type="primary" icon="ios-cloud-upload-outline" :loading="loading">
				{
  { loading ? "上传中..." : "上传附件" }}
			</Button>
		
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值