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></Upload><!-- 提示文字 --><p style="color:red;">温馨提示:请上传指定文件格式的文件!</p></FormItem></Form>复制代码
参数配置详情:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
action | 上传的地址,必填 | String | - |
disabled | 是否禁用 | Boolean | false |
data | 上传时附带的额外参数 | Object | - |
name | 上传的文件字段名 | String | file |
show-upload-list | 是否显示已上传文件列表 | Boolean | true |
type | 上传控件的类型,可选值为 select(点击选择),drag(支持拖拽) | String | select |
accept | 接受上传的文件类型 | String | - |
format | 支持的文件类型,与 accept 不同的是,format 是识别文件的后缀名,accept 为 input 标签原生的 accept 属性,会在选择文件时过滤,可以两者结合使用 | Array | [] |
before-upload | 上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传 | Function | - |
on-success | 文件上传成功时的钩子,返回字段为 response, file, fileList | Function | - |
on-error | 文件上传失败时的钩子,返回字段为 error, file, fileList | Function | - |
on-remove | 文件列表移除文件时的钩子,返回字段为 file, fileList | Function | - |
on-format-error | 文件格式验证失败时的钩子,返回字段为 file, fileList | Function | - |
on-exceeded-size | 文件超出指定大小限制时的钩子,返回字段为 file, fileList | Function | - |
default-file-list | 默认已上传的文件列表,例如:[{name: '',url: ''}] | Array | [] |
【 oss.js 】文件:
const oss = { accessKeyId: "" /* 用户请求的accessid */ , accessKeySecret: "" /* */ , signature: "" /* 上传文件签名信息 */ , policy: "" /* 用户表单上传策略 */ , path: "https://xxxxxx.oss-cn-beijing.aliyuncs.com" /* 上传阿里云服务器地址 */ , filePath: "oss_file/" /* OSS上传文件的路径(生成指定的文件夹) */};/* 文件重命名 */const fileRename = fileName => { let suffixName = fileName; if (fileName.lastIndexOf(".") != -1) { suffixName = fileName.substring(fileName.lastIndexOf(".")); } const moment = new Date(); let yyyy = moment.getFullYear(), MM = moment.getMonth() + 1, dd = moment.getDate(), hh = moment.getHours(), mm = moment.getMinutes(), ss = moment.getSeconds(); MM = MM <= 9 ? "0" + MM : MM; dd = dd <= 9 ? "0" + dd : dd; let rm = (Math.random() * 1e5).toFixed(), path = `${yyyy}${MM}/${dd}_${hh}${mm}${ss}_${rm}`; return path + suffixName; };export { oss, fileRename };复制代码
注:提出全局公用的属性和方法。
上传文件属性配置:
import { oss, fileRename } from "../utils/oss";export default { name: "Upload", data() { return { loading: false, defaultFile: [] /* { name: "", url: "" } */ , upAction: oss.path /* 上传路径 */ , upData: { key: "" /* 文件路径/文件名 */ , policy: "", OSSAccessKeyId: "", success_action_status: 200 /* 状态码 */ , signature: "", name: "" /* 文件名 */ } /* 上传参数 */ , upFormat: ["jpg", "jpeg", "png"] /* 上传文件类型 */ , voteForm: {} /* form表单 */ , }; }, methods: { // 上传文件之前beforeUpload(file) { /* 文件重命名 */let fileName = fileRename(String(file.name)); // 值传参数let { accessKeyId, policy, signature, filePath } = oss; Object.assign(this.upData, { key: filePath[0] + fileName, policy: policy, OSSAccessKeyId: accessKeyId, signature: signature, name: fileName }); this.loading = true; }, // 上传成功回调onSuccess(response, file, fileList) { this.loading = false;![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d8a13c44e8c94c52a2c6b57af3f19a27~tplv-k3u1fbpfcp-watermark.image)// 拼接成完整的地址let fileURI = this.upAction + "/" + this.upData.key; this.voteForm.filePath = fileURI; console.log("生成文件地址:", fileURI); this.$Message.success({ background: true, content: "文件上传成功" }); }, // 移除文件onRemove(file) { this.voteForm.filePath = ""; this.$Message.success({ background: true, content: "附件移除成功" }); }, // 文件上传失败onError(error, file) { this.loading = false; this.$Message.error({ background: true, content: "文件上传失败,请稍后再试!" }); }, // 文件格式上传失败onFormatError(file) { // 上传文件格式与指定文件格式不匹配this.loading = false; this.$Message.error({ background: true, content: "上传文件格式有误,请重新选择文件类型!" }); } } };复制代码
注意事项:
- 此次项目中使用的是单文件上传,如需配置多文件请参考官网API;
- 动态拼接上传参数时需要提前给属性赋默认值,在 beforeUpload 钩子函数中做拦截处理;
- 在上传文件之前获取OSS直传其它参数,进行赋值处理,否则上传文件的参数只会展示一个默认的值 file;
- 在 beforeUpload函数中,若返回 false或者 Promise均会停止文件上传;
- OSS直传时 onSuccess 回调函数中 response 返回值 有可能为空,此时需要自己手动拼接上传文件的绝对地址来进行赋值。