iView 文件上传（OSS 直传）

预计阅读时间: 5 分钟

前言：

前期项目中使用了第三方的开源 UI 框架 View UI（前期叫 iView，现在也叫「view design」）。总体感觉该 UI 框架还是比较不错的。但是现在 View UI 商业化了，部分功能需要付费才能使用。近期做的功能模块需要上传文件，就想到 UI 中的 Upload 上传 模块，思前想后决定用它来实现文件上传。

之所以选用 UI 自身的文件上传，主要是因为其可配置，还有上传进度条。本次文件上传因为要涉及到大文件上传，上传等待时间有点长，为了实时显示上传的进度，故采用 Upload 上传，其自身带有可配置的上传进度条以及上传文件列表，正好可以满足我的需求。

需求：

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

Vue 代码示例

1<form ref="voteForm" :model="voteForm" :label-width="120">
2	<FormItem label="上传附件">
3		<!-- 附件链接地址 -->
4		<input type="hidden" v-model.trim="voteForm.filePath" />
5		<!-- Upload上传 -->
6		<Upload
7			:disabled="loading"
8			:action="upAction"
9			:data="upData"
10			:format="upFormat"
11			:before-upload="beforeUpload"
12			:on-success="onSuccess"
13			:on-error="onError"
14			:on-remove="onRemove"
15			:on-format-error="onFormatError"
16			:default-file-list="defaultFile"
17		>
18			<button type="primary" icon="ios-cloud-upload-outline" :loading="loading">{{ loading ? "上传中..." : "上传附件" }}</button>
19		</Upload>
20		<!-- 提示文字 -->
21		<p style="color:red;">温馨提示：请上传指定文件格式的文件！</p>
22	</FormItem>
23</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	默认已上传的文件列表	Array	[{name: 'img1.jpg',url: 'http://www.xxx.com/img1.jpg'}]

【 oss.js 】文件：

OSS参数

1const oss = {
2	accessKeyId: "" /* 用户请求的accessid */,
3	accessKeySecret: "" /*  */,
4	signature: "" /* 上传文件签名信息 */,
5	policy: "" /* 用户表单上传策略 */,
6	path: "https://xxxxxx.oss-cn-beijing.aliyuncs.com" /* 上传阿里云服务器地址 */,
7	filePath: "oss_file/" /* OSS上传文件的路径（生成指定的文件夹） */
8};
9
10/* 文件重命名 */
11const fileRename = fileName => {
12	let suffixName = fileName;
13	if (fileName.lastIndexOf(".") != -1) {
14		suffixName = fileName.substring(fileName.lastIndexOf("."));
15	}
16
17	const moment = new Date();
18	let yyyy = moment.getFullYear(),
19		MM = moment.getMonth() + 1,
20		dd = moment.getDate(),
21		hh = moment.getHours(),
22		mm = moment.getMinutes(),
23		ss = moment.getSeconds();
24	MM = MM <= 9 ? "0" + MM : MM;
25	dd = dd <= 9 ? "0" + dd : dd;
26
27	let rm = (Math.random() * 1e5).toFixed(),
28		path = `${yyyy}${MM}/${dd}_${hh}${mm}${ss}_${rm}`;
29	return path + suffixName;
30};
31
32export { oss, fileRename };

🌳

提出全局公用的属性和方法。

上传文件属性配置：

上传配置

1import { oss, fileRename } from "../utils/oss";
2
3export default {
4	name: "Upload",
5	data() {
6		return {
7			loading: false,
8			defaultFile: [] /* { name: "", url: "" } */,
9			upAction: oss.path /* 上传路径 */,
10			upData: {
11				key: "" /* 文件路径/文件名 */,
12				policy: "",
13				OSSAccessKeyId: "",
14				success_action_status: 200 /* 状态码 */,
15				signature: "",
16				name: "" /* 文件名 */
17			} /* 上传参数 */,
18			upFormat: ["jpg", "jpeg", "png"] /* 上传文件类型 */,
19			voteForm: {} /* form表单 */
20		};
21	},
22	methods: {
23		// 上传文件之前
24		beforeUpload(file) {
25			/* 文件重命名 */
26			let fileName = fileRename(String(file.name));
27			// 值传参数
28			let { accessKeyId, policy, signature, filePath } = oss;
29			Object.assign(this.upData, {
30				key: filePath[0] + fileName,
31				policy: policy,
32				OSSAccessKeyId: accessKeyId,
33				signature: signature,
34				name: fileName
35			});
36
37			this.loading = true;
38		},
39		// 上传成功回调
40		onSuccess(response, file, fileList) {
41			this.loading = false;
42			// 拼接成完整的地址
43			let fileURI = this.upAction + "/" + this.upData.key;
44			this.voteForm.filePath = fileURI;
45			console.log("生成文件地址：", fileURI);
46			this.$Message.success({
47				background: true,
48				content: "文件上传成功"
49			});
50		},
51		// 移除文件
52		onRemove(file) {
53			this.voteForm.filePath = "";
54			this.$Message.success({
55				background: true,
56				content: "附件移除成功"
57			});
58		},
59		// 文件上传失败
60		onError(error, file) {
61			this.loading = false;
62			this.$Message.error({
63				background: true,
64				content: "文件上传失败，请稍后再试！"
65			});
66		},
67		// 文件格式上传失败
68		onFormatError(file) {
69			// 上传文件格式与指定文件格式不匹配
70			this.loading = false;
71			this.$Message.error({
72				background: true,
73				content: "上传文件格式有误，请重新选择文件类型！"
74			});
75		}
76	}
77};

注意事项：

此次项目中使用的是单文件上传，如需配置多文件请参考官网 API；
动态拼接上传参数时需要提前给属性赋默认值，在 beforeUpload 钩子函数中做拦截处理；
在上传文件之前获取 OSS 直传其它参数，进行赋值处理，否则上传文件的参数只会展示一个默认的值 file；
在 beforeUpload 函数中，若返回 false 或者 Promise 均会停止文件上传；
OSS 直传时 onSuccess 回调函数中 response 返回值 有可能为空，此时需要自己手动拼接上传文件的绝对地址来进行赋值。

#iView 文件上传（OSS 直传）

#前言：

#需求：

#参数配置详情：

#【 oss.js 】文件：

#上传文件属性配置：

iView 文件上传（OSS 直传）

前言：

需求：

参数配置详情：

【 oss.js 】文件：

上传文件属性配置：