uppy 上传文件以及从上传的Excel文件中取出数据并保存后显示到html表格

 

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>&nbsp;</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);
            }
        }