前言:
前期项目中使用了第三方的开源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>