iView文件上传（OSS直传）

本文主要是介绍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;// 拼接成完整的地址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: "上传文件格式有误，请重新选择文件类型！"});}}
};