[发明专利]文件上传按钮大小自适应调整的上传方法

权利要求书

1.一种文件上传按钮大小自适应调整的上传方法，其特征在于，预先设置一个界面框架、多个操作步骤，所述方法包含如下步骤：

根据选择的多个所述操作步骤，在所述界面框架上生成与选择的所述操作步骤对应的链接，所述操作步骤包含编辑操作步骤、文件上传操作步骤以及上传信息显示操作步骤；

将所述对应的链接在所述界面框架上显示为人机交互界面；

接收用户通过触发所述对应的链接发送的编辑操作步骤请求，请求在所述人机交互界面下创建图片类型的大按钮和小按钮，并在所述大按钮和所述小按钮下方创建一个隐藏的文件上传按钮；

接收用户通过触发所述对应的链接发送的文件上传操作步骤请求，请求在所述人机交互界面上点击所述大的按钮，弹出文件选择框，选择一个或多个文件之后，所述人机交互界面上会出现上传的所述一个或多个文件列表，同时所述大按钮会缩小，变成所述小按钮；

接收用户通过触发所述对应的链接发送的上传信息显示操作步骤请求，请求在所述人机交互界面上触碰所述小按钮后，显示上传状态的提示信息。

2.如权利要求1所述文件上传按钮大小自适应调整的上传方法，其特征在于，所述界面框架为vue框架。

3.如权利要求2所述文件上传按钮大小自适应调整的上传方法，其特征在于，在所述vue框架内创建一个子组件；在所述子组件的js部分，创建一个响应式变量showBig，并给所述响应式变量showBig设置默认值为true；在所述子组件的js部分，编写方法changeBig，将入参的值赋给showBig，并将所述编写方法changeBig暴露给调用所述编写方法changeBig的父组件。

4.如权利要求3所述文件上传按钮大小自适应调整的上传方法，其特征在于，在所述人机交互界面下创建图片类型的大按钮和小按钮包含如下子步骤：

在所述子组件的HTML部分中，创建图片类型的大按钮和小按钮；

给所述大按钮添加class=‘big’的样式，用于将所述大按钮的宽度、高度设置为400px，并且位置为页面布局的垂直居中；

给所述小按钮设置30px的默认宽度、高度，位置为页面布局的左上方；

在所述大按钮和所述小按钮外层各包裹一个div标签；

给所述大按钮和所述小按钮的单击事件绑定方法“triggerUpload”；

在所述子组件的js部分中，编写方法“triggerUpload”，实现触发隐藏的所述文件上传按钮的单击事件。

5.如权利要求4所述文件上传按钮大小自适应调整的上传方法，其特征在于，所述div标签中加上属性“v-show”，对于所述小按钮来说，加的属性值为“!showBig”，对于所述大按钮来说，加的属性值为“showBig”。

6.如权利要求3所述文件上传按钮大小自适应调整的上传方法，其特征在于，在所述大按钮和所述小按钮下方创建一个隐藏的文件上传按钮包含如下子步骤：

在所述子组件的HTML部分中，且所述大按钮和所述小按钮下方，创建一个文件上传按钮；

给所述文件上传按钮加上hidden属性，隐藏所述文件上传按钮；

给所述文件上传按钮的change事件绑定“chosenFile”方法；

在所述子组件的js部分中，编写方法“chosenFile”，实现相应的功能。

7.如权利要求6所述文件上传按钮大小自适应调整的上传方法，其特征在于，所述相应的功能包含：上传文件到后台；将false传递给changeBig方法，将showBig设为false，控制显示小按钮；显示已上传的文件列表。

8.如权利要求3所述文件上传按钮大小自适应调整的上传方法，其特征在于，若所述父组件在已上传的文件列表中提供删除已上传文件的功能，当删除文件后，文件列表为空时，需要在点击“删除”后，将true传递给所述子组件暴露出的changeBig方法，将所述子组件的showBig设为true，控制显示大按钮。

9.如权利要求1所述文件上传按钮大小自适应调整的上传方法，其特征在于，在未发送编辑操作步骤请求之前，所述人机交互界面上给用户显示一个所述大按钮。