uppy版本为2.1.1
html
<environment names="Development"> <link rel="stylesheet" href="~/lib/uppy/uppy.css" asp-append-version="true" /> <link rel="stylesheet" href="~/lib/datatables/css/dataTables.bootstrap4.css" asp-append-version="true" /> </environment> <environment names="Production"> <link rel="stylesheet" href="~/lib/datatables/css/dataTables.bootstrap4.min.css" asp-append-version="true" /> <link rel="stylesheet" href="~/lib/uppy/uppy.min.css" asp-append-version="true" /> </environment> <form class="form-horizontal form-label-left input_mask" id="UploadFileForm" method="post" onkeydown="if (event.keyCode==13) return false;"> <input id="Id" name="Id" value="@Model.Id" type="hidden" /> <div class="form-group"> <div id="drag-drop-area"></div> </div> <div class="UppyProgressBar"></div> </form> <div> <table id="QueryTable" class="table mb-0" cellspacing="0" width="100%"> <thead> <tr> <th> </th> <th> </th> <th> </th> <th> </th> </tr> </thead> </table> </div> <!-- Uploaded files list --> <environment names="Development"> <script src="~/lib/datatables/js/jquery.dataTables.js" asp-append-version="true"></script> <script src="~/lib/datatables/js/dataTables.bootstrap4.js" asp-append-version="true"></script> <script src="~/lib/uppy/uppy.js" asp-append-version="true"></script> <script src="~/lib/jquery-serialize-object/jquery.serialize-object.min.js" asp-append-version="true"></script> <script src="~/js/UploadReport.js" asp-append-version="true"></script> </environment> <environment names="Production"> <script src="~/lib/datatables/js/jquery.dataTables.min.js" asp-append-version="true"></script> <script src="~/lib/datatables/js/dataTables.bootstrap4.min.js" asp-append-version="true"></script> <script src="~/lib/jquery-serialize-object/jquery.serialize-object.min.js" asp-append-version="true"></script> <script src="~/lib/uppy/uppy.min.js" asp-append-version="true"></script> <script src="~/js/UploadReport.js" asp-append-version="true"></script> </environment>
js
var uploadForm = $('#UploadFileForm'); $(document).ready(function () { //document.querySelector('.Uppy').innerHTML = '' InitUploadButton(); }); function InitUploadButton() { const uppy = new Uppy.Core({ autoProceed: true, restrictions: { maxNumberOfFiles: 1, minNumberOfFiles: 1 //allowedFileTypes: ['.*'] } }) uppy.use(Uppy.Dashboard, { inline: true, target: '#drag-drop-area', allowMultipleUploads: false, showLinkToFileUploadResult: false, showProgressDetails: false, showSelectedFiles: true, showRemoveButtonAfterComplete: true, hideRetryButton: true, hidePauseResumeButton: false, hideCancelButton: false, height: 300 }) uppy.use(Uppy.ProgressBar, { target: '.UppyProgressBar', hideAfterFinish: false, }) uppy.use(Uppy.XHRUpload, { endpoint: '/*/*?Id=' + $('#Id').val(), formData: true, fieldName: 'files[]', }) // And display uploaded files uppy.on('upload-success', (file, response) => { var data = response.body; if (data.Result === true) { CustomFunction.ShowNotify('success', 'Success', data.Message); searchData(true); } else CustomFunction.ShowNotify('error', 'Error', data.Message); }) uppy.on('upload-error', (file, error, response) => { console.log('error message:', error); CustomFunction.ShowNotify('error', 'Error', error); }); } function searchData(resetPage) { uploadForm.waitMe({ effect: 'win8', text: 'Please wait...', bg: 'rgba(255,255,255,0.7)', color: '#000', maxSize: '', textPos: 'vertical', fontSize: '' }); if ($.fn.dataTable.isDataTable('#QueryTable')) { const table = $('#QueryTable').DataTable(); table.ajax.reload(null, resetPage); } else { $('#QueryTable').DataTable({ processing: true, serverSide: true, pageLength: 20, lengthChange: false, displayStart: 0, ajax: { url: "/*/*", type: "POST", data: function (d) { // @ts-ignore d.Id = $('#Id').val(); }, "dataSrc": function (json) { return json.item; } }, "ordering": false, "scrollX": true, "searching": false, "columns": [ { "data": " " }, { "data": " " }, { "data": " " }, { "data": null, orderable: false, className: 'dt-body-center', render: function (data, type, full, meta) { return "<div style='white-space:nowrap;'><a class='confirm' href='javascript:void(0)' onclick=\"Delete('" + data.VId + "')\"><i class=\"fa fa fa-minus-square-o\" aria-hidden=\"true\" style=\"color:red;\"></i></a></div>"; } } ], "createdRow": function (row, data, index) { // @ts-ignore if (data.Enabled === "N") { $('td', row).css("color", "red"); } } }).on('draw.dt', function () { uploadForm.waitMe('hide'); }); } } function Delete(VId) { if (confirm('Please confirm if you want to delete the data.')) { $.ajax({ url: "/*/*", type: "POST", data: { VId: VId }, dataType: 'json', beforeSend: function () { uploadForm.waitMe({ effect: 'win8', text: 'Please wait...', bg: 'rgba(255,255,255,0.7)', color: '#000', maxSize: '', textPos: 'vertical', fontSize: '' }); }, error: function (cc, msg) { CustomFunction.ShowNotify('error', 'Error', msg); }, success: function (data) { if (data.Result === true) { CustomFunction.ShowNotify('success', 'Success', data.Message); searchData(false); } else CustomFunction.ShowNotify('error', 'Error', data.Message); } }).always(function () { uploadForm.waitMe('hide'); }); } }
后台方法
using ClosedXML.Excel; [HttpPost] public ActionResult<ReturnMessageDataModel> UploadRFilesByTaskId(string TaskId) { try { var result = new ReturnMessageDataModel(); TaskVendorDataModel model = new TaskVendorDataModel(); string pathrefer = Request.Headers[HeaderNames.Referer].ToString(); string Serverpath = _hostingEnvironment.ContentRootPath + "/" + Constants.FilePathUpload + "/"; var postedFile = Request.Form.Files[0]; if (postedFile == null ) { result.Result = false; result.Message = "未获取任何文件信息"; return result; } string file; //In case of IE if (Request.Headers[HeaderNames.UserAgent].ToString().ToUpper() == "IE") { string[] files = postedFile.FileName.Split(new char[] { '\\' }); file = files[files.Length - 1]; } else // In case of other browsers { file = postedFile.FileName; } if (!Directory.Exists(Serverpath)) { Directory.CreateDirectory(Serverpath); } string fileDirectory = Serverpath; string ext = Path.GetExtension(fileDirectory + "/" + file); var newFileName = Guid.NewGuid() + ext; // Creating a unique name for the file var filePath = Serverpath + "/" + newFileName; using (var stream = new FileStream(filePath, FileMode.Create)) { postedFile.CopyTo(stream); } Response.Headers.Add("Vary", "Accept"); Response.ContentType = "application/json"; List<string> Codes = new List<string>(); //EXCEL 中取出数据 using (XLWorkbook wb = new XLWorkbook(filePath)) //FilePath { var ws = wb.Worksheets.First(); var range = ws.RangeUsed(); for (int j = 2; j < range.RowCount() + 1; j++) { Codes.Add(ws.Cell(j, 1).Value.ToString()); } } var ResultCode = _upload.FindVendorDataByVcodes(Codes); if (ResultCode.Count() == 0) { result.Message = "上传数据错误,请重新上传!"; return result; } model.Creator = User.Identity.Name; model.FileName = file; model.VenCodes = ResultCode; model.TaskId = TaskId; return _upload.InsertFileData(model); } catch (Exception ex) { _logger.LogError(ex, "UploadFiles Error"); return BadRequest(Constants.Return_Failed + Environment.NewLine + ex.Message); } }