一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了。我这里分享一下我自己开发的一套大文件上传控件供大家参考
项目截图
路径配置
将localhost:8888/全部替换为实际项目路径
数据库配置，
SQL2005
1.创建数据表和存储过程
创建后可以在数据库中看到创建好的数据表
2.修改数据库帐号和密码
Web.config
connectionStrings
3.修改配置地址
注意
1.端口号必须正确，路径必须正确。
2.在局域网测试时需要将localhost改为服务器的IP地址。
比如测试地址：oa.qq.com
UrlPost：http://oa.qq.com/db/f_post.aspx
3.在外网测试时需要将localhost改为外网地址。
这是前端代码：
<body>
<div id="app">
{{ message }}
<http-uploader6></http-uploader6>
</div>
<script type="text/javascript">
// 定义一个名为 button-counter 的新组件
Vue.component('http-uploader6', {
data() {
return {
upApp: null
}
},
mounted() {
//初始化up6
const _this = this;
this.upApp = new HttpUploaderMgr();
this.upApp.load_to("up6-div");
},
destoryed() {
//this.editor.destory();
},
methods: {
open_file: function () { this.upApp.openFile(); }
, open_folder: function () { this.upApp.openFolder(); }
},
template: '<div id="up6-div"></div>'
});
var app = new Vue({
el: '#app',
data: {
message: '演示up6如何在vue中使用'
}
});
</script>
</body>
这是后台存储部分代码：
using System.Web;
using up6.db.model;
namespace up6.db.biz
{
/// <summary>
/// 路径生成器基类
/// 提供文件或文件夹的存储路径
/// </summary>
public class PathBuilder
{
/// <summary>
/// 根级存储路径,
/// </summary>
/// <returns></returns>
public string getRoot()
{
return HttpContext.Current.Server.MapPath("/upload");
}
public virtual string genFolder(ref FileInf fd)
{
return string.Empty;
}
public virtual string genFile(int uid, ref FileInf f)
{
return string.Empty;
}
public virtual string genFile(int uid, string md5, string nameLoc)
{
return string.Empty;
}
}
}
文件批量上传
分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。我们随机上传4个文件或文件夹
当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。如下图：
当重新打开网页时，只需要点击继续即可。
上传完成后，我们发现页面上已出现相应的文件或文件夹名称
查看我们的数据库会发现已经新建了当天的日期文件夹，点击查看
会发现随机生成的4个文件夹并存放，打开发现确认是我们上传的原文件或文件夹
至此上传测试成功，当然有了上传自然也离不开下载。
勾选多个上传的文件或文件夹，你会发现多了一个下载按钮
然后点击下载按钮，设置下载目录文件夹
我设置的是桌面的测试下载目录，设置好点击确定后，继续点击下载按钮，你会发现在页面的右下角出现了下载面板，你选择的文件已出现在目录中，然后点击全部下载，或者单个点击继续
下载完成后打开我们设置的下载目录文件夹，发现需下载的文件或文件夹确认已下载成功，文件夹内的内容与下载文件夹内容一致
数据库记录
产品介绍官网：https://dwz.cn/fgXtRtnu