最佳文件上传组件 —— filepond

这个组件为前端提供了vue适配 vue-filepond ，为后端提供了Django适配 django-drf-filepond . 二者相互配合，开箱即用，能够实现文件上传的个性化定制。主要包括一下几个方面：

其常规 *** 作流程镇裤为

添加文件后， vue-filepond 会自动传给 server.url . 这里后端需要配合实现这个临时文件的存储，并且返回临时文件的ID。

如果后端用了宴桥 django-drf-filepond 库的话，上面这个过程就不用自己动手做了，只需要配置一条路由 path('fp/', include('django_drf_filepond.urls')) 即可。同御祥简时，这条路由能够跟前端配合，完成临时文件的上传、重传、删除等功能。

常见的场景是，用户将文件跟表单的其它字段一同提交至服务器。在点击确认前， filepond 已经完成了临时文件的上传。所以，点击确认后，服务器只用将硬盘里的临时文件持久化即可，缩短了等待时间，用户体验会更好。

/// <summary>上传文件方法

/// 返回文件名

/// </summary>

/// <param name="myFileUpload">上传控件ID</param>

/// <param name="allowExtensions">允许上传的扩展文件名类型,如：string[] allowExtensions = { ".doc", ".xls"乱高租, ".ppt", ".jpg", ".gif" }</param>

/// <param name="maxLength">允许上传的最大大小，以M为单位</param>

/// <param name="savePath">保存文件的目录，注意是绝对路径,如：Server.MapPath("~/upload/")</param>哗兆

public static string Upload(FileUpload myFileUpload, string[] allowExtensions, int maxLength, string savePath)

{

// 文件格式是否允许上传

bool fileAllow = false

//检查是否有文件案

if (myFileUpload.HasFile)

{

// 检查文件大小, ContentLength获取的是字节，转成M的时候要除以2次1024

if (myFileUpload.PostedFile.ContentLength / 1024 / 1024 >= maxLength)

{

throw new Exception("只能上传小于" + maxLength + "M的文件！")

}

//取得上传文件之扩展文件名，并念唤转换成小写字母

string fileExtension = System.IO.Path.GetExtension(myFileUpload.FileName).ToLower()

string tmp = "" // 存储允许上传的文件后缀名

//检查扩展文件名是否符合限定类型

for (int i = 0i <allowExtensions.Lengthi++)

{

tmp += i == allowExtensions.Length - 1 ? allowExtensions[i] : allowExtensions[i] + ","

if (fileExtension == allowExtensions[i])

{

fileAllow = true

}

}

if (fileAllow)

{

try

{

string datedir = DateTime.Now.ToString("yyyyMMdd")

if (!Directory.Exists(savePath + datedir))

{

Directory.CreateDirectory(savePath + datedir)

}

string saveName = Guid.NewGuid() + fileExtension

string path = savePath + datedir + "/" + saveName

//存储文件到文件夹

myFileUpload.SaveAs(path)

return datedir + "/" + saveName

}

catch (Exception ex)

{

throw new Exception(ex.Message)

}

}

else

{

throw new Exception("文件格式不符，可以上传的文件格式为：" + tmp)

}

}

else

{

throw new Exception("请选择要上传的文件！")

}

}

调用：

try

{

string proimg = Niunan.Shop.Utility.Tool.Upload(fuimg, new string[] { ".jpg", ".gif", ".png" }, 3, Server.MapPath("~/upload/"))

}

catch (Exception ex)

{

Response.Write(ex.Message)

}

文件上传有两种方式

1.基于文件处理为文件流然后然后传给返裤服务器，这个我们一般是用form-data来处理的，我们把文件流信息放到form-data里面，把form-data传给我们的服务器。然后服务器拿到form-data相关的数据做处理。

2.客户端需要把文件转化为base64位，转化为base64然后传给服务器，服务器在转化为文件

VUE elementUI 表单上传

在项目开发需求中基于VUE + elementUI在表单实现多张图片和Excel文件上传的需求。

1.图片上传模板

2、常用方法介绍

1、在实现自定义上传的:auto-upload设为"false"时before-upload将会无效，此时如要验证文件类型或者大小此处使用on-change的方法，在on-change方法中判断图片类型、大小，如果符合要求加入到pthotoLists中，不符合则移除

2、表单点击提交进行验证以及文件自定义上传将文件通过参数传递

1、将form表单元素的name与value进行组合，实现表单数据做烂的漏胡简序列化，从而减少表单元素的拼接，提高工作效率

3、通过append方法进行添加文件和数据

4、pPostFile为接口提交方式相当于axios

action为 提交的地址（接口名称）

formDataObj为表单中提交的所有参数（内容）

hearder即为header中需要的参数

---