前后端分离的文件管理系统

已于 2022-08-08 15:23:37 修改
阅读量1.4k 收藏 2
点赞数
分类专栏： 后端 前端 文章标签： vue.js
于 2022-08-08 15:08:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26695613/article/details/126227965
版权
前端 同时被 2 个专栏收录
130 篇文章 6 订阅
订阅专栏
后端
57 篇文章 2 订阅
订阅专栏

技术栈：前端vue2.x全家桶。服务端：.net Core3.1 ORM:xcode 数据库:mysql.

先上效果图：

文件管理操作页面代码：

<template>
    <div id="v_ywArrivalRecord">
        <el-container style="height: calc(100vh - 102px); border: 1px solid #eee">
            <el-container>
                <el-header>
                    <div class="search">
                        <el-form :inline="true" class="demo-form-inline" >
                            <el-form-item label="日期：">
                                <el-date-picker v-model="queryparam.startDate" type="date" placeholder="选择开始日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="-">
                                <el-date-picker v-model="queryparam.endDate" type="date" placeholder="选择结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                            <el-form-item class="btn">
                                <el-button type="primary" icon="el-icon-search" @click="getList();">查询</el-button>
                                <el-button size="small" class="el-button-iconButton" icon="el-icon-upload" style="text-overflow: initial;" @click="handleUpload">上传</el-button>
                                <el-button size="small" class="el-button-iconButton" icon="el-icon-plus" style="text-overflow: initial;" @click="handleAddFolder">新建文件夹</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                       <span v-show="false">当前路径：{{BusinessType}} </span>
                        <el-button size="small" class="el-button-iconButton" icon="el-icon-upload" v-has="'fileMgr_handelUpload'" style="text-overflow: initial;" @click="handleUpload">上传</el-button>
                        <el-button size="small" class="el-button-iconButton" icon="el-icon-plus"  v-has="'fileMgr_handleAdd'" style="text-overflow: initial;" @click="handleAddFolder">新建文件夹</el-button>
                    </div>
                    
                </el-header>
                
                <el-main>
                    <el-table
                        v-loading="listLoading"
                        :data="list"
                        :element-loading-text="elementLoadingText"
                        @selection-change="setSelectRows"
                        @row-click="handleRowdblclick"
                    >
                    <el-table-column show-overflow-tooltip type="selection"></el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        label="序号"
                        type="index"
                        width="50"
                        align="center"
                    ></el-table-column>

                    <el-table-column
                        show-overflow-tooltip
                        prop="id"
                        label=""
                        align="center"
                        v-if="false"
                    ></el-table-column>
                    
                    <el-table-column
                        show-overflow-tooltip
                        prop="fileName"
                        label="文档名称"
                        align="center"
                    >
                        <template show-overflow-tooltip #default="{ row }">
                            <i v-if="row.fileCType == 1" class="el-icon-files">{{row.fileName}}</i>
                            <i v-else class="el-icon-folder-opened">{{row.fileName}}</i>
                        </template>
                    </el-table-column>

                    <el-table-column
                        show-overflow-tooltip
                        prop="uploadTime"
                        label="上传时间"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="downloadCount"
                        label="下载次数"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="creator"
                        label="录入人"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        align="center"
                        label="操作"
                        width="250"
                    >
                        <template show-overflow-tooltip #default="{ row }">
                        <!-- <el-tooltip v-show="false" class="item" effect="dark" content="重命名" placement="top">
                            <el-button
                            size="mini"
                            class="btnStyle"
                            type="primary"
                            icon="el-icon-edit"
                            @click="handleEdit(row)"
                            ></el-button>
                        </el-tooltip> -->
                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                            <el-button
                            v-has="'fileMgr_handleMultiplDel'"
                            size="mini"
                            class="btnStyle"
                            type="danger"
                            icon="el-icon-delete"
                            v-show="row.fileName != '根目录' && row.fileName != '上一层'"
                            @click="Singelmultipl(row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="下载" placement="top">
                            <el-button
                            v-has="'fileMgr_handleDownLoad'"
                            class="btnStyle"
                            type="success"
                            size="mini"
                            icon="el-icon-download"
                            v-show="row.fileCType == 1"
                            @click="commonDownLoad(row)"
                            ></el-button>
                        </el-tooltip>
                        </template>
                    </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        :current-page="page.pageNo"
                        :page-size="page.pageSize"
                        :layout="layout"
                        :total="page.total"
                        @size-change="getSizeChange"
                        @current-change="getCurrentPage"
                    ></el-pagination>
                </el-main>
            </el-container>
        </el-container>

        <div>
            <el-dialog title="新建文件夹" :visible.sync="isFolder" width="30%">
                <el-input v-model="FileName" autocomplete="off"></el-input>
                <el-button type="primary" @click="submitForm()">提交</el-button>
            </el-dialog>
        </div>

        <div>
            <el-dialog title="上传文件" :visible.sync="isUpload" width="50%">
                <RateUpload :BusinessType='BusinessType' :BusinessId='BusinessId' :Ismultiple='Ismultiple' :limit="limit" @uploadSuccess='uploadSuccess'></RateUpload>
            </el-dialog>
        </div>
       
    </div>
</template>
<script>
import RateUpload from '@/components/VabUpload/rateUploadFileMgr'
import base from '@/api/base'

export default {
    data(){
        return{
            queryparam:{
                startDate:'',
                endDate:'',
            },
            BusinessType:"0",
            BusinessId:1,//0：文件夹  1：文件
            limit:1,
            Ismultiple:false,
            isFolder:false,
            isUpload:false,
            selectRows:[],
            list: null,
            listLoading: true,
            layout: 'total, sizes, prev, pager, next, jumper',
            elementLoadingText: '正在加载...',
            page: {
                //关于页码的相关参数
                pageShow: true, //是否显示
                total: 0, //总条数
                pageSize: 10, //每页条数
                pageNo: 1, //第几页
            },
            FileName:'',//wenjianjia



        }
    },
    components:{
        RateUpload
    },
    created(){},
    mounted() {
        this.getList();//调用获取列表页的方法
    },
    methods:{
        //查询
        getList(){
            var self = this;  
            this.$http({
                method: 'GET',
                url: base.env+'/api/CommonBusineess/GetFileManagePageBySearch?pageSize=' + self.page.pageSize + '&pageIndex=' + self.page.pageNo+'&id='+self.BusinessType+'&startDate='+self.queryparam.startDate+'&endDate='+self.queryparam.endDate
            }).then(res => {
                if(res.status==200){
                    self.list=res.data.data;
                    self.page.total = res.data.total;
                    self.listLoading=false;
                }
          }).catch(error => {
            console.log(error);
          });
        }, 
        handleAddFolder(){
            this.isFolder=true;
        },
        handleUpload(){
            this.isUpload=true;
        },
        setSelectRows(val) {
            this.selectRows = val;
        },
        handleRowdblclick(row, column, event) {//双击行
            var self = this;  
            if(row.fileCType==0){//文件夹
                this.BusinessType=row.id;
                this.$http({
                    method: 'GET',
                    url: base.env+'/api/CommonBusineess/GetFileManagePageBySearch?pageSize=10000&pageIndex=1&id='+row.id
                }).then(res => {
                    debugger
                    if(res.status==200){
                        self.list=res.data.data;
                        self.page.total = res.data.total;
                        self.$http({
                            method: 'GET',
                            url: base.env+'/api/CommonBusineess/GetParentIdById?id='+row.id
                        }).then(res => {
                            debugger
                            if(res.status==200){
                                self.list.unshift({ "id": 0, "keyId": 0, "fileCategory": null, "fileType": null, "fileCType": 0, "docType": "9", "usrId": 1, "creator": "", "uploadTime": "", "fileCode": null, "fileName": "根目录", "fileGuid": "", "fileUrl": "", "downloadCount": 0, "version": null, "keyWords": null, "backup": null, "status": null },
                                                  { "id": res.data.data, "keyId": res.data.data, "fileCategory": null, "fileType": null, "fileCType": 0, "docType": "9", "usrId": 1, "creator": "", "uploadTime": "", "fileCode": null, "fileName": "上一层", "fileGuid": "", "fileUrl": "", "downloadCount": 0, "version": null, "keyWords": null, "backup": null, "status": null });
                                self.listLoading=false;
                            }
                        }).catch(error => {
                            console.log(error);
                        });
                        
                    }
                }).catch(error => {
                    console.log(error);
                });
            }
        },
        getSizeChange(val) {
            //table组件发射的方法 用于改变每页数据量
            this.page.pageSize = val
            //这下面需要重新调用 获取列表页的函数
            this.getList()
        },
        getCurrentPage(val) {
            //table组件发射的方法  用于改变当前所在页码
            this.page.pageNo = val
            //这下面需要重新调用 获取列表页的函数
            this.getList()
        },
        handleEdit(){},
        Singelmultipl(row){
            var self = this;  
            this.$confirm('确认删除？').then(function () {
                self.handleMultiplDel(row);
            }).catch(function () {
                
            });
        },
        handleMultiplDel(row){
            var self = this;  
            this.$http({
                method: 'GET',
                url: base.env+'/api/CommonBusineess/handleRemoveFile?id='+row.id
            }).then(res => {
                if(res.data.code==200){
                    self.$message({
                        message: res.data.message,
                        type: 'info'  //warning,success,info,error
                    });
                }
                if(res.data.code==300){
                    self.$message({
                        message: res.data.message,
                        type: 'warning' //warning,success,info,error
                    });
                }
                self.getList();
                self.handleRowdblclick({id:self.BusinessType,fileCType:0},{},{});
            }).catch(error => {
                console.log(error);
            });
        },
        commonDownLoad(row){
            var self = this;
            this.$http({
                method: 'GET',
                url: base.env+'/api/CommonS/commonGetDownLoadPath?partialPath='+row.fileUrl
            }).then(res => {
                debugger
                if(res.data.code==200){
                    location.href = base.env + '/api/CommonS/commonDownLoad?fileName='+row.fileName+'&path='+res.data.data; 
                    self.$http({
                        method: 'GET',
                        url: base.env+'/api/CommonBusineess/downLoadFile?id='+row.id
                    }).then(res => {
                        self.getList();
                        self.handleRowdblclick({id:self.BusinessType,fileCType:0},{},{});
                    }).catch(error => {
                        console.log(error);
                    });       
                } 
            }).catch(error => {
                console.log(error);
            });
        },
        uploadSuccess(obj){
            if(obj.fileName!=undefined){
                this.$message({
                    message: '上传成功！',
                    type: 'success' //warning,success,info,error
                });
            }else{
                this.$message({
                    message: '文件格式错误，上传失败！',
                    type: 'error' //warning,success,info,error
                });
            }
            this.isUpload=false;
            this.getList();
            this.handleRowdblclick({id:this.BusinessType,fileCType:0},{},{});
        },
        submitForm(){
            var self = this;
            this.$http({
                method: 'GET',
                url: base.env+'/api/CommonBusineess/UploadFolder?BusinessType='+self.BusinessType+'&FileName='+self.FileName
            }).then(res => {
                if(res.data.code==200){
                    self.isFolder=false;
                    self.getList();  
                    self.handleRowdblclick({id:self.BusinessType,fileCType:0},{},{});
                } 
            }).catch(error => {
                console.log(error);
            });
        },






    }
}
</script>
<style scoped>
::-webkit-scrollbar{width: 7px;height: 7px;background-color: #F5F5F5;}
  /*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #F5F5F5;}
  /*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{border-radius: 10px;box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);background-color: #c8c8c8;}
.el-aside {color: #333;}
.el-header{height: 100px !important;}
.el-header .search{box-sizing: border-box;border-bottom: 1px solid #eee;text-align: left;}
.el-header .search .btn{position: absolute;right: 12px;top: 2px;}
.el-header .tools{height: 40px;border: 1px solid #ccc;background: #F5F5F5;line-height: 35px;text-align: right;padding: 0px 5px;}
.el-main{height: calc(100vh - 336px);}
.el-cascader,.el-cascader--medium{width: 100%;height: 28px;line-height: 28px;}
.el-date-editor,.el-input {width: 100%;}
.el-icon-folder-opened:before {
    content: "\E784";
    font-size: 20px !important;
    background: yellow !important;
}
.el-icon-files:before {
    content: "\E75B";
    font-size: 20px !important;
    background: #51ff09 !important;
}
</style>

文件上传组件：

<template>
    <div id="v_upload">
        <el-upload
            class="upload-demo"
            drag
            :limit='limit'
            :action="action+'?BusinessId='+BusinessId+'&BusinessType='+BusinessType"
            :headers='headers'
            :before-upload='beforeUpload'
            :on-success='uploadSuccess'
            :on-exceed="handleExceed"
            :multiple='Ismultiple'>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">上传不超过30M的文件</div>
        </el-upload>
        <div v-show='false'>
            <el-input v-model="fileName" autocomplete="off"></el-input>
            <el-input v-model="fileURL" autocomplete="off"></el-input>
        </div>
    </div>
</template>
<script>
import base from '@/api/base'

  export default {
    props:['BusinessId','BusinessType','Ismultiple','limit'],
    data() {
      return {
        Base64:'',
        fileName:'',
        fileURL:'',
        headers:{},
        // headers:{token:sessionStorage.getItem('Authorization')},
        action: base.env+'/api/CommonBusineess/UploadFilesFileMgr',
      };
    },
    created(){
      
    },
    watch: {
      fileName() {
        this.uploadEmit();
      }
    },
    mounted() {
     
    },
    methods: {
      beforeUpload (file) {
      　　var self = this;
      　　var reader = new FileReader();
      　　reader.readAsDataURL(file);
      　　reader.onload = function(e) {
      　　　　// 图片base64化
      　　　　var newUrl = this.result;    //图片路径
              self.Base64 = newUrl;
      　　};
          var ext=file.name.substring(file.name.lastIndexOf(".")+1,file.name.length).toLowerCase();
          // var msg=/^image\/(jpeg|png|jpg|gif|txt|doc|docx|document|xls|xlsx|pdf)$/.test(file.type)
	        const isLt4M = file.size / 1024/1024 <=30 //大小不超过30MB
	        if(!(ext!="xls"||ext!="xlsx"||ext!="pdf"||ext!="docx"||ext!="doc"||ext!="txt"||ext!="gif"||ext!="jpg"||ext!="jpeg"||ext!="png")){
	          this.$message.error('上传文件格式不对!');
	          return false;
	        }
	        if(!isLt4M) {
	          this.$message.error('上传文件大小不能超过 30M!');
	          return false;
          }
          
	        return isLt4M
      },
      handleExceed(files, fileList){
        if(files.length>this.limit){
          this.$message.warning(`此次上传数量为：${files.length}，超出文件最大（${this.limit}）限制个数。`);
        }
      },
      uploadSuccess(response, file, fileList){
        this.fileName=response.fileName;
        this.fileURL=response.fileURL;
      },
      uploadEmit(){
        this.$emit('uploadSuccess', {fileName:this.fileName,fileUrl:this.fileURL,Base64:this.Base64});
      }
    }
  }
</script>
<style scoped>

</style>

base：后端接口基地址。

axios封装：

import axios from 'axios'

Vue.prototype.$http = axios

服务端代码：

 public class CommonBusineessController : BaseController
    {
        #region
      

        /// <summary>
        /// 查询文件管理带分页
        /// </summary>
        /// <param name="id">查询内容</param>
        /// <param name="pageIndex">页索引</param>
        /// <param name="pageSize">页大小</param>
        /// <returns></returns>
        [HttpPost, HttpGet]
        public ActionResult<ZyFileinfos> GetFileManagePageBySearch(string id, int pageIndex, int pageSize, string startDate, string endDate)
        {
            var data = XCode.Entity<ZyFileinfos>.FindAll().ToList();
           
            if (!string.IsNullOrEmpty(id))
            {
                data = data.Where(p => p.keyId == id).ToList();
            }
            if (!string.IsNullOrEmpty(startDate))
            {
                data = data.Where(p => p.uploadTime >= Convert.ToDateTime(startDate)).ToList();
            }
            if (!string.IsNullOrEmpty(endDate))
            {
                data = data.Where(p => p.uploadTime <= Convert.ToDateTime(endDate)).ToList();
            }
            var list = data.Skip((pageIndex - 1) * pageSize).Take(pageSize);
            return Ok(new { code = 200, total = data.Count, data = list });
        }



        /// <summary>
        /// 查询文件管理
        /// </summary>
        /// <param name="id">查询内容</param>
        /// <returns></returns>
        [HttpPost, HttpGet]
        public ActionResult<ZyFileinfos> GetParentIdById(Int32? id)
        {
            ZyFileinfos data = XCode.Entity<ZyFileinfos>.Find("id", id);
            return Ok(new { code = 200, data = data.keyId });
        }


        /// <summary>
        /// 文件管理删除
        /// </summary>
        /// <returns></returns>
        [HttpPost, HttpGet]
        public ActionResult<ZyFileinfos> handleRemoveFile(string id)
        {
            if (XCode.Entity<ZyFileinfos>.FindAll("keyId", id).ToList<ZyFileinfos>() != null && XCode.Entity<ZyFileinfos>.FindAll("keyId", id).ToList<ZyFileinfos>().Count > 0)
            {
                return Ok(new { code = 300, message = "该文件夹存在文件，不允许删除！" });
            }
            else
            {
                string message=XCode.Entity<ZyFileinfos>.Find("id", id).Delete() > 0 ? "操作成功！" : "操作失败！";
                return Ok(new { code = 200, message });
            }

        }

        /// <summary>
        /// 下载
        /// </summary>
        /// <returns></returns>
        [HttpPost, HttpGet]
        public ActionResult<ZyFileinfos> downLoadFile(string id)
        {
            ZyFileinfos model = XCode.Entity<ZyFileinfos>.Find("id", id);
            model.downloadCount += 1;
            XCode.Entity<ZyFileinfos>.Update(model);
            return Ok(new { code = 200 });
        }

        /// <summary>
        /// 文件管理附件上传
        /// </summary>
        /// <param name="sfi"></param>
        /// <returns></returns>
        [HttpPost, HttpGet]
        [AllowAnonymous]
        public IActionResult UploadFolder(ZyFileinfos sfi)
        {
            //UserModel CurUser = JsonConvert.DeserializeObject<UserModel>(this.User.FindFirstValue(ClaimTypes.UserData));
            bool isSucc = false;
            string fPath = "";
            string shortTime = DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss");
            string CurDate = DateTime.Now.ToString("yyyyMMddHHmmssff");
            string filePhysicalPath = Directory.GetCurrentDirectory() + "/Upload/FileMgr/" + CurDate;
            ZyFileinfos model = new ZyFileinfos();
            var filePath = Path.Combine(Directory.GetCurrentDirectory(), "Upload/FileMgr/" + CurDate, sfi.FileName);
            fPath = filePath;
            var linkNameHTML = "Upload/FileMgr/" + CurDate + "/" + sfi.FileName + "";
            var fileName = Path.GetFileName(linkNameHTML);//带后缀
            model.keyId = sfi.BusinessType.ToString(); //上级目录
            model.fileCType = 0;//0：文件夹  1：文件
            model.docType = "9";//暂定9文件管理
            //model.usrId = Convert.ToInt32(CurUser.UserId);
            //model.Creator = CurUser.UserName;
            model.uploadTime = DateTime.Now;
            model.fileName = sfi.FileName;
            model.fileUrl = linkNameHTML;
            model.fileGuid = Guid.NewGuid().ToString();
            model.downloadCount = 0;
            isSucc=XCode.Entity<ZyFileinfos>.Insert(model) > 0 ? true : false;
            return Ok(new { code = 200, IsSuccess = true, model.fileUrl, model.fileName });
        }

        /// <summary>
        /// 文件管理添加文件夹
        /// </summary>
        /// <param name="sfi"></param>
        /// <returns></returns>
        [HttpPost, HttpGet]
        public IActionResult UploadFilesFileMgr(ZyFileinfos sfi)
        {
            //UserModel CurUser = JsonConvert.DeserializeObject<UserModel>(this.User.FindFirstValue(ClaimTypes.UserData));
            bool isSucc = false;
            var file = Request;
            var files = Request.Form.Files;
            string fPath = "";
            string shortTime = DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss");
            string CurDate = DateTime.Now.ToString("yyyyMMddHHmmssff");
            string filePhysicalPath = Directory.GetCurrentDirectory() + "/Upload/FileMgr/" + CurDate;
            Console.WriteLine(filePhysicalPath);
            //如果目标文件夹不存在，则创建    
            if (!Directory.Exists(filePhysicalPath))
            {
                Directory.CreateDirectory(filePhysicalPath);
            }
            string allowExtension = ".jpg,.jpeg,.png,.gif,.txt,.doc,.docx,.xls,.xlsx,.pdf";// System.Configuration.ConfigurationManager.AppSettings["excelExtension"].ToString();
            //Sys_FileInfo model = new Sys_FileInfo();
            ZyFileinfos model = new ZyFileinfos();
            foreach (var file1 in files)
            {
                if (file1.Length > 0)
                {
                    string extension = Path.GetExtension(file1.FileName).ToLower();
                    if (allowExtension.IndexOf(extension) == -1)
                    {
                        return Ok(new { IsSuccess = false });
                    }

                    var filePath = Path.Combine(Directory.GetCurrentDirectory(), "Upload/FileMgr/" + CurDate, file1.FileName);
                    fPath = filePath;
                    using (var stream = new FileStream(filePath, FileMode.Create))
                    {
                        file1.CopyTo(stream);
                    }
                }
                var linkNameHTML = "Upload/FileMgr/" + CurDate + "/" + file1.FileName + "";
                var fileName = Path.GetFileName(linkNameHTML);//带后缀
                model.keyId = sfi.BusinessType.ToString(); //上级目录
                model.fileCType = Convert.ToInt32(sfi.BusinessId);//0：文件夹  1：文件
                model.docType = "9";//暂定9文件管理
                //model.usrId = Convert.ToInt32(CurUser.UserId);
                //model.Creator = CurUser.UserName;
                model.uploadTime = DateTime.Now;
                model.fileName = fileName;
                model.fileUrl = linkNameHTML;
                model.fileGuid = Guid.NewGuid().ToString();
                model.downloadCount = 0;
                isSucc = XCode.Entity<ZyFileinfos>.Insert(model) > 0 ? true : false;
            }
            return Ok(new { code = 200, IsSuccess = true, model.fileUrl, model.fileName });
        }


    #endregion
}

下载文件通用代码：

public class CommonS : BaseController
    {        
        private readonly IHostingEnvironment _hostingEnvironment;
        string _webRootPath = string.Empty;

        string _contentRootPath = string.Empty;

        /// <summary>
        /// 构造函数相关
        /// </summary>
        /// <param name="hostingEnvironment">参数</param>
        public CommonS(IHostingEnvironment hostingEnvironment)
        {
            _hostingEnvironment = hostingEnvironment;
            _webRootPath = _hostingEnvironment.WebRootPath;
            _contentRootPath = _hostingEnvironment.ContentRootPath;
        }



        /// <summary>
        /// 获取下载文件路径
        /// </summary>
        /// <param name="partialPath">文件部分路径</param>
        /// <returns></returns>
        [HttpPost, HttpGet]
        public ActionResult commonGetDownLoadPath(string partialPath)
        {
            if (!string.IsNullOrEmpty(partialPath))
            {
                _contentRootPath += "/"+partialPath;
                FileInfo fileInfo = new FileInfo(_contentRootPath);
                if (fileInfo.Exists == true)
                {
                    return Ok(new { code = 200, data = _contentRootPath });
                }
                else
                {
                    return Ok(new { code = 404, data = "下载文件已经被删除,无法下载!" });
                }
            }
            else
            {
                return Ok(new { code = 201, msg = "参数不能为空！" });
            }
        }

        /// <summary>
        /// 下载通用[文件名称带后缀,比如.doc,.xls]
        /// </summary>
        /// <param name="fileName">文件名称</param>
        /// <param name="path">路径</param>
        /// <returns></returns>
        [HttpPost, HttpGet]
        public ActionResult commonDownLoad(string fileName, string path)
        {
            if (!string.IsNullOrEmpty(fileName) && !string.IsNullOrEmpty(path))
            {
                var stream = System.IO.File.OpenRead(path);
                return File(stream, "application/oct-stream", fileName.Trim());//输出到浏览器             
            }
            else
            {
                return Ok(new { code = 201, msg = "参数不能为空！" });
            }
        }

}

 数据库设计：

 

 扩展字段：

 

书中自有妍如玉
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
spring boot+vue开发前后端分离无限速文件管理系统
04-21
项目描述 一个 vue-element结合 七牛云 的云端网盘存储系统 运行环境 vue2.9.6+jdk8+SpringBoot2.3.5+redis+mysql+IntelliJ IDEA+maven 项目技术(必填) springBoot 2.3.5+mybatis+redis+vue 首页.. http://localhost:9527/#/login 由于需要在七牛云上存储，无法演示上传，查询，请自行创建七牛云账号实现测试 注意事项 1.npm install前端代码后，npm run dev出错的话，可以删除node_modules文件夹，再重新install 2.注册时，发送邮件需要设置自己的smtp服务，否则会抛出异常
项目中如果管理前端文件CSS和JS
weixin_34006965的博客
02-16 146
如何管理CSS和JS文件，一直是前端一个热门的话题。下面将简单分享一下使用心得，欢迎大家吐槽、拍砖和提供更好的实现方式。一、管理CSS文件，本博客将讨论less管理。iReset.less、iButton.less、iCss3.less、iIcon.less、iTab.less、iMenu.less、iDialog.less、iForm.less、iDatagrid.less等等文件、以上文件都是...
一二三应用开发平台文件处理设计与实现系列之2——前端集成vue-simple-uploader
学海无涯，行者无疆
06-06 5029
文件的上传是系统的必备功能，Element提供了上传组件upload，也基本能满足常见常用的文件上传功能，特别是应对小型文件（10M以下）的处理。但如果是遇到要求更多更高的场景，上传几百兆甚至上G的视频文件，要求分块上传，能断点续传，显示进度，能暂停，能重试……这时候就显得乏力了。如果基于upload实现，需要附加大量的二次开发，这未必是一种最佳实现方案。 这时候，就需要找一找看一看，市面上是否有现成的“轮子”可用了。 接下来，分两篇，分别介绍下前端实现和后端实现，今天首先来说下前端那些事儿。
前后端分离Element UI删除和批量删除
weixin_33834075的博客
06-07 1423
<template> <div> <div style="margin-top: 20px"> <el-button @click="delArray()" type="danger">批量删除</el-button> <el-button @click="toggleSelection()">取消选择&lt...
基于Springboot+Bootstrap的文件管理全套解决方案（文件列表、上传、预览、下载、删除、打包下载等）
hanxiaozhang的博客
05-01 7399
前言： 最近，不知道是不是最后一搏，事业群上层领导要求7天内完成ABS项目中保理系统的一期开发。需求评审会后，我发现各个功能模块都有大量的文件材料展示与上传，为了提高开发效率，我与组长商量，我先开发文件模块，为其他同事提供公共方法，减少重复工作。 使用的前端技术栈：Bootstrap、Bootstrap-table、layer.js、layui.js、jquery.media.js 设计思路...
vue文件管理系统仿百度网盘
11-13
Doc文件管理系统仿百度网盘源代码使用vue+elementUI实现文件下钻功能，类似百度网盘功能，hover显示下载
java + vue 实现文件管理系统（超简洁）
weixin_45826772的博客
11-30 4832
开源一个超简易的文件管理系统，只是为了满足自己一些小文件的统一在线管理
Vue中如何进行文件浏览与文件管理
程序员徐师兄的博客
06-16 2748
本文介绍了如何使用Vue和库来实现文件浏览和文件管理功能。我们首先使用npm安装了库，并在Vue中注册了和组件。然后，我们通过组件实现了文件上传，通过组件实现了文件浏览。希望本文能够帮助你在Vue项目中实现文件浏览和文件管理功能。
基于springboot+vue+fastdfs的文件简易管理系统
唐昊
03-28 2256
前台展示用户上传的经过审核之后的文件相关信息，通过下拉框确定搜索的条件，进行相关内容的模糊查询，根据定位的相关信息，可以预览查看文件相关的详细信息，以及进行附件的下载操作（下载会判断五文件的属性，是否为非公开文件，公开的可以直接下载，反之需要进行登录认证操作，并记录日志）前端 vue cli3.0 （axios、element ui）后端技术栈 springboot + mybatis。分布式文件存储系统 FastDFS。数据库 mysql 5.7。
Java项目：文档管理系统（spring Boot + mybatis + vue + security）前后端分离架构
Soncat2000的博客
01-09 2548
本文档管理系统采用前后端分离模式前端采用vue、elementUi技术，后端使用spring Boot + mybatis + Maven + security进行后台的搭建。 Vue：主要负责页面的渲染显示，用vue来实现。 Controller：负责读取视图表现层的数据，控制用户的输入，并调用业务层的方法，通过controller实现。 Model：对需求分析之后的对象模型分析，主要负责数据的管理。
前后端分离后台管理系统
03-01
基于SpringBoot的权限管理系统 易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用。 用户管理：用户是系统操作者，该功能主要完成系统用户配置。 部门管理：配置...
SpringBoot+Vue实现汽车销售管理系统前后端分离项目.zip
05-08
实现功能说明：汽车销售提供客户信息、车辆信息、订单信息、销售人员管理、财务报表等功能，提供经理和销售两种角色进行管理。包含数据库脚本文件。
SpringBoot酒店管理系统（前后端分离项目）包含数据库脚本文件.zip
06-20
SpringBoot酒店管理系统（前后端分离项目）包含数据库脚本文件.zip 1、酒店管理系统后台,供管理员管理系统之用 客房类型设置✔ 客房设置✔ 操作员设置✔ 2、酒店管理系统系统供酒店所有工作人员使用前台 入住登记： ...
中台Admin前后端分离的权限管理系统.zip
01-03
中台Admin前后端分离的权限管理系统。支持多租户、数据权限、动态Api、任务调度、OSS文件上传、滑块拼图验证、国内外主流数据库自由切换和动态高级查询。基于.Net跨平台开发的WebApi。集成统一认证授权、事件总线、...
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 562
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 130
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 796
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
vue中的async
最新发布
三三木木七的博客
05-06 176
在使用 async 关键字声明的函数内部，可以使用 await 关键字来等待一个 Promise 对象解析。这样可以使代码更加清晰和易于理解，因为它们使异步代码看起来更像同步代码，避免了回调地狱。
小区服务|基于SprinBoot+vue的小区服务管理系统(源码+数据库+文档)
weixin_66413741的博客
05-01 1083
这次开发的小区服务管理系统对安保管理、安保分配管理、客服聊天管理、字典管理、房屋管理、反馈管理、论坛管理、公告管理、反馈处理管理、住户管理、员工管理、管理员管理等进行集中化处理。经过前面自己查阅的网络知识，加上自己在学校课堂上学习的知识，决定开发系统选择B/S模式这种高效率的模式完成系统功能开发。这种模式让操作员基于浏览器的方式进行网站访问，采用的主流的Java语言这种面向对象的语言进行小区服务管理系统程序的开发，在数据库的选择上面，选择功能强大的Mysql数据库进行数据的存放操作。
springboot+mongodb前后端分离员工管理系统
05-25
好的，那我先简单介绍一下Spring Boot和MongoDB，再讲一下如何使用它们进行前后端分离开发员工管理系统。 Spring Boot是一个基于Spring框架的快速开发框架，它可以帮助开发者快速构建基于Spring的应用程序，而不需要手动配置很多复杂的配置文件。Spring Boot还提供了很多快速开发的功能，比如自动配置、控制反转、面向切面编程等等，极大地提高了开发效率。 MongoDB是一种NoSQL数据库，它是一种文档型数据库，使用JSON格式存储数据。MongoDB具有高可用性、自动分片、自动故障转移、快速查询等特点，非常适合处理大量的非结构化数据。 前后端分离开发是一种新的开发模式，它将前端和后端分离开发，前端负责展示数据、交互和UI设计，后端负责数据的存储、处理和业务逻辑。这种开发模式可以提高开发效率，同时也使得前端和后端可以独立开发、独立测试、独立部署。 下面是一个使用Spring Boot和MongoDB进行前后端分离开发的员工管理系统的简单步骤： 1. 首先需要安装MongoDB，并创建一个名为employee的数据库和employee_info的集合。 2. 创建一个Spring Boot项目，并添加MongoDB的依赖。 3. 创建一个Employee类，用来表示员工信息，包括姓名、年龄、性别等等。 4. 创建一个EmployeeRepository接口，用来定义数据库操作，比如增删改查等。 5. 创建一个EmployeeController类，用来处理HTTP请求，比如查询所有员工、添加员工、更新员工信息等等。 6. 创建一个前端页面，用来展示员工信息列表，以及添加、修改员工信息。 7. 使用JavaScript等前端技术，通过Ajax请求后端数据，实现前后端的交互。 这样，一个简单的前后端分离的员工管理系统就完成了，你可以根据自己的需求添加更多的功能，比如员工离职、工资管理等等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值