欢迎光临
我的个人博客网站

「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之文件上传(十)


基于Vue和Quasar的前端SPA项目实战之文件上传(十)

回顾

通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之数据导入(九)的介绍,实现了业务数据批量导入功能,本文主要介绍文件上传相关内容。

简介

crudapi支持附件字段,表字段里面保存的是文件url字符串。附件可以通过其它文件管理系统比如阿里云的OSS进行上传,或者使用系统自带的文件管理API进行上传,包括普通文件上传和大文件切片上传两种方式。

UI界面

「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之文件上传(十)
文件上传

「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之文件上传(十)
大文件上传

API

「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之文件上传(十)

文件上传API,包括普通文件上传和大文件切片两个功能,具体的通过swagger文档可以查看。通过axios封装api,名称为file

import { axiosInstance } from "boot/axios";  const HEADERS = {   "Content-Type": "multipart/form-data" };  const file = {   upload: async function(data, progressCallback) {     console.log("file->upload")     return axiosInstance.post(`/api/file` , data,       {         headers: HEADERS,         onUploadProgress:  (progressEvent) => {           if (progressCallback) {             progressCallback(progressEvent)           }         }     });   },   bigUpload: async function(data, progressCallback) {     console.log("file->bigUpload")     return axiosInstance.post(`/api/file/big` , data,       {         headers: HEADERS,         onUploadProgress:  (progressEvent) => {           if (progressCallback) {             progressCallback(progressEvent)           }         }     });   } };  export { file }; 

核心代码

CFile组件

 <q-toggle v-model="enableBigFile" label="开启大文件上传模式" />    <div v-show="!enableBigFile" class="q-py-md">     <q-file v-model="normalFile" label="请选择文件(普通上传)">       <template v-slot:prepend>         <q-icon name="attach_file" />       </template>       <template v-slot:after>         <q-btn round dense flat icon="send" @click="onSubmitClick" />       </template>     </q-file>   </div>    <div v-show="enableBigFile" class="q-py-md">     <q-file v-model="bigFile" @input="bigFileAdded" label="请选择文件(大文件上传)">       <template v-slot:prepend>         <q-icon name="attach_file" />       </template>       <template v-slot:after>         <q-btn round dense flat icon="flight_land" @click="onBigSubmitClick" />       </template>     </q-file>   </div> 

通过toggle切换上传模式,如果是小文件采用普通的方式即可。

普通上传

async onSubmitClick() {   console.info("CFile->onSubmitClick");    if (!this.normalFile) {     this.$q.notify({       message: '请选择文件!',       type: 'warning'     });     return;   }    this.$q.loading.show({     message: "上传中"   });    try {     let form = new FormData()     form.append('file', this.normalFile);      this.fileInfo = await fileService.upload(form, (e)=> {       console.info(e);     });     this.$q.loading.hide();     this.$emit("input", this.fileInfo);   } catch (error) {     this.$q.loading.hide();     console.error(error);   } } 

大文件切片上传

bigFileAdded(f) {   console.info("CFile->fileAdded");    if (!f) {     console.info("CFile->cancel");     return;   }    this.$q.loading.show({     message: "文件准备中"   });    FileMd5(f, this.chunkSize, (e, md5) => {     this.md5 = md5;     console.info(e);     console.info(md5);     this.$q.loading.hide();   }); },  async onBigSubmitClick() {   console.info("CFile->onBigSubmitClick");    if (!this.bigFile) {     this.$q.notify({       message: '请选择文件!',       type: 'warning'     });     return;   }     this.$q.loading.show({     message: "上传中"   });    try {     let chunks = this.getChunks();      let reqs = [];     for (let i = 0; i < chunks; ++i) {       reqs.push(this.uploadWithBlock(i));     }      await Promise.all(reqs)     .then((datas) => {       console.info(datas);       this.checkFinished(datas);     });   } catch (error) {     this.$q.loading.hide();     console.error(error);   } } 

大文件如果采用普通的上传方式,可能由于网络的原因速度比较慢,而且不稳定,所以采用切片的方式进行多线程上传。具体原理如下:首先计算文件MD5,后台会根据MD5唯一确定是同一个文件,同一个文件的不同block根据大小和偏移量会写在相同文件对应的位置,当最后一个block上传成功后,表示上传结束。分片大小默认为20MB,可以配置为需要的值,前端通过Promise.all的ajax调用方式可以实现多线程同时上传。

文件表为例

「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之文件上传(十)
文件表的“链接”字段设置类型为“附件ATTACHMENT”,添加业务数据页面会自动采用CFile组件。

「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之文件上传(十)
选择大文件之后,点击上传图标,通过chrome网络请求发现,多线程分片上传模式已经启动,上传结束之后可以查看下载。

小结

本文主要介绍了文件上传功能,包括普通上传模式和大文件切片上传模式,大文件切片上传模式通过优化后很容易支持断点续传和秒传,后续会根据需求优化文件上传功能。

demo演示

官网地址:https://crudapi.cn
测试地址:https://demo.crudapi.cn/crudapi/login

附源码地址

GitHub地址

https://github.com/crudapi/crudapi-admin-web

Gitee地址

https://gitee.com/crudapi/crudapi-admin-web

由于网络原因,GitHub可能速度慢,改成访问Gitee即可,代码同步更新。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之文件上传(十)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏