iView文件上传

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>

参数配置详情：

【 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: "上传文件格式有误，请重新选择文件类型！"
			});
		}
	}
};

注意事项：

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