> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# iView OSS 直传

## 前言：

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

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

## 需求：

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

```html title="Vue 代码示例"
<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      | 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-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](http://www.xxx.com/img1.jpg)'}] |

### 【 oss.js 】文件：

```javascript title="OSS参数"
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 };
```

:::tip 说明
提出全局公用的属性和方法。
:::

### 上传文件属性配置：

```javascript title="上传配置"
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: "上传文件格式有误，请重新选择文件类型！",
            });
        },
    },
};
```

:::danger 注意事项

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

:::