iView文件上传（OSS直传）

最新推荐文章于 2023-08-04 14:14:02 发布

原创

最新推荐文章于 2023-08-04 14:14:02 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了如何利用iView UI框架的Upload组件实现阿里云OSS直传文件的功能，详细讲解了配置参数和上传文件属性，并提到了在直传过程中需要注意的细节，如动态拼接上传参数、在beforeUpload钩子函数中拦截处理等。

前言：

前期项目中使用了第三方的开源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>
		</Upload>
		<!-- 提示文字 -->
		<p