VOL-vue 框架 文件上传控件关于大文件上传等待的修改

于 2023-12-10 21:18:51 发布
阅读量609 收藏 10
点赞数 7
分类专栏： vue DotNet VOL.Core 文章标签： vue.js .netcore
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangyong1250/article/details/134914518
版权

我的项目在测试voltable列表组件中对阿里云OSS做附件上传时，几十M的文件可能就会需要一段时间来上传，才能有OSS的状态和链接返回。 但是控件VolUpload.vue并没有去在这方面做任何交互体验上的控制，而且VolUpload.vue本身写的几个上传函数都是异步的，OSS接口可能也是异步的，实时等待状态返回不现实。  

经过很久的修改调试，我做出如下修改，给上传按钮增加 :disabled 属性绑定，默认false即为按钮可用，在点击上传按钮时，disabled改为true不可用，然后等OSS返回200状态时再改为false可用。具体代码如下列截图

9200237
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+element实现大文件上传
07-04
vue+element实现大文件上传
vol-vue框架基本使用
最新发布
quill_editor的博客
10-16 1831
vol-vue框架的使用
关于C#的vol.vue框架使用
CureGuy的博客
11-04 2849
关于C#的vol.vue框架使用，如同之前玩的Java和vue框架的那样学习。
vol-vue框架Cascader 组件多级联动（前端部分）
quill_editor的博客
10-16 1610
vlo框架中对cascader组件进行自定义
VOL框架数据库配置(避坑)
JiaEason的博客
05-25 1797
最近公司需要开发一个C#系统用到了VOL框架，本人是一个C#小白，所以基本都是按照VOL作者提供的讲解视频操作。(视频链接)但是有一个环节还是出现了差错，导致前期一直启动不了后端项目，下面把这个问题分享给大家，避免踩雷。
vue实现文件批量上传及进度条展示
第九系艾文
09-26 8124
vue实现上传文件进度条
vue+springboot 大文件上传
01-23
在现代Web应用中，大文件上传是一个常见的需求，特别是在数据密集型或媒体丰富的环境中。`Vue.js` 和 `SpringBoot` 是两个强大的技术框架，分别用于前端和后端开发。本教程将详细介绍如何利用这两者来实现高效的大...
springboot+vue实现超大文件分片极速上传与下载完整前后端源码
10-31
这个系统结合了Spring Boot后端框架和Vue.js前端框架，以实现文件的分片上传与下载功能，同时具备断点续传和秒传特性，为用户提供了流畅的文件操作体验。 首先，Spring Boot是基于Spring框架的一个快速开发工具，它...
vue+axios+el-upload实现文件上传（带参数）：
01-03
备注：不要自己设置请求头类型，让浏览器自己解析，如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误（415错误Unsupported Media Type）；请将此配置注释掉； async uploadFile(...
Vue框架
weixin_56781779的博客
05-12 607
文章目录VueMVVMbody中script中生命周期钩子函数 Vue Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架. 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合 MVVM MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View 的 状态和行为抽象化，让我们将视图 UI 和业务逻辑分开 body中 插值表达式显示数据：{{demo}}
Vol.Vue_20210401.part1_vol_vue_
10-03
开源的vol.vue源码，包括全部源码和资料。这是后端，前端在Vol.Vue
VOL-VUE框架怎么在数据行增加操作按钮
weixin_51579206的博客
06-01 643
注意：我此处代码是放在 代码生成的js文件中 onInit() 方法中 也可以放在.vue文件中-把 this.columns.push(）去除然后放在 columns中即可。但是这样的话不能写逻辑操作（至少我现在没看懂怎么写，有看懂的可以滴滴我一下我学习学习~~）title:'操作',type:'string',width:220,align:'left',render: (h, { row, column, index }) => {}, "开始处理"),//此处写点击后要触发的事件。
vol.vue的学习
Qiuxuntao的博客
11-18 888
vol.vue
VOL框架学习（二）使用代码生成器生成菜单和页面
热门推荐
qq_38769403的博客
10-09 1万+
在使用之前确保前端后端都以正常运行，可以查看VOL框架学习（一）从零开始搭建项目 （一）首先是生成Vue页面 1、使用超级管理员账户登录网站【用户名：admin；密码：123456】 2、点击菜单栏中的【代码在线生成器】→【Vue+后台代码生成】，再点击【新建】 弹出下面的窗口，新建配置信息，首先创建目录 【父级ID为0相当于创建目录，其他空随意填写】 点击【+确定】之后就会生成一个一级目录【实时信息表】，主键ID为81（记住！后面要用） 3、然后再次点击新建，创建目录下的..
iView VolUpload上传组件使用，C#后台
jiageilinanchen的博客
10-30 327
前台 Vue： <template> <div class="upload-item"> <vol-box :model.sync="viewModel" :height="200" :width="500" title="导入主表"> <VolUpload :url="url" :upload-before="uploadBefore" :upload-after="uploadAfter"
超大文件上传控件
weixin_45525177的博客
05-13 337
最近遇见一个需要上传超大大文件的需求，调研了七牛和腾讯云的切片分段上传功能，因此在此整理前端大文件上传相关功能的实现。 在某些业务中，大文件上传是一个比较重要的交互场景，如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大，或者网络条件不好时，上传的时间会比较长（要传输更多的报文，丢包重传的概率也更大），用户不能刷新页面，只能耐心等待请求完成。 下面从文件上传方式入手，整理大文件上传的思路，并给出了相关实例代码，由于PHP内置了比较方便的文件拆分和拼接方法，因此服务端代码使用PHP进
Vue实现文件上传(单文件、多文件、分片上传)
weixin_45525177的博客
10-16 6694
web端上传文件后，后端读取文件并存储到静态资源存储位置，并将地址存进数据库，这样通过地址就能访问到资源了，在这之前我们需要配置服务端存储文件的本地文件夹。3.分片上传（使用blob切片对文件进行切割）前端使用UI封装好的upload组件。
Vol.vue前后端发布笔记
weixin_43952332的博客
05-28 2524
Vol.vue前后端部署
vue3.0中使用ant-design-vue上传文件
04-07
在Vue3.0中使用ant-design-vue上传文件，可以按照以下步骤进行： 1. 安装ant-design-vue和axios ``` npm install ant-design-vue axios --save ``` 2. 在main.js中引入ant-design-vue和axios，并注册组件 ``` import { createApp } from 'vue' import App from './App.vue' import { Button, Upload } from 'ant-design-vue' import axios from 'axios' const app = createApp(App) // 注册组件 app.use(Button) app.use(Upload) // 注册axios app.config.globalProperties.$axios = axios app.mount('#app') ``` 3. 在组件中使用Upload组件进行文件上传 ``` <template> <div> <a-upload :action="uploadUrl" :headers="uploadHeaders" :data="uploadData" :before-upload="beforeUpload" :on-success="onSuccess" :on-progress="onProgress" :on-error="onError" > <a-button>上传文件</a-button> </a-upload> </div> </template> <script> export default { data() { return { uploadUrl: 'http://localhost:3000/upload', uploadHeaders: { Authorization: 'Bearer ' + localStorage.getItem('token') }, uploadData: { name: 'example' } } }, methods: { beforeUpload(file) { console.log('beforeUpload', file) }, onSuccess(response) { console.log('onSuccess', response) }, onProgress(progress) { console.log('onProgress', progress) }, onError(error) { console.log('onError', error) } } } </script> ``` 在上面的示例中，我们使用了a-upload组件来上传文件。在组件中，我们可以通过props传入一些参数，比如上传接口的地址、请求头、上传的数据等。同时，还可以通过监听事件来处理上传的结果，比如上传成功、上传进度、上传失败等。 需要注意的是，我们在main.js中通过Vue的全局配置将axios注册到了Vue实例中，因此在组件中可以通过this.$axios来发起请求。在上传文件时，需要将文件数据添加到uploadData中，这样才能将文件上传到服务器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值