Vue+antd 上传附件a-upload组件化，附送C#异步上传文件代码【NetFrm4.5+】+Vue 增删改查代码

十年河东，十年河西，莫欺少年穷

学无止境，精益求精

这是一个后端开发人员的倔强

因项目需要，我从一个纯后端变成了前端+后端，也俗称全栈。

在实际项目中，上传附件几乎是必不可少的，因此，我们有必要将上传控件进行组件化。

设计理念，通过vue的父子传值进行封装，上传组件为子组件，调用方为父组件，由父组件传值给子组件，用来校验上传的文件扩展名及大小。

子组件

父组件

下面来简单分析下上述源码

父组件Data中fileinfo的属性用来校验文件大小，扩展名

  data() {
    return {
      checked:false,
      fileinfo: {
        maxsize: 1024 * 1024 * 100,
        filetype: ["jpg", "png"],
        uploadfiles: [],
      },
    };
  }

注：uploadfiles 用于接收子组件请求后台的结果，我的后台返回值为：

{
    Data {
        LocalFilePath: "E:\IOT\IotApi\Content\OTA\4dccdff9bc17413c96d98031a8a451ec.bin",
        filedata: [80, 19, 0, 32, 1, 33, 0, 8, 1, 139, 0, 8, 69, 114, 0, 8, 229, 138, 0, 8, 43, 74, 0, 8, 219, 182, 0, 8, 0, 0...],
        filename: "4dccdff9bc17413c96d98031a8a451ec.bin",
        filepath: "~/Content/OTA/4dccdff9bc17413c96d98031a8a451ec.bin",
        filesize: 49336,
        oldfilename: "LBS-1522-YQ4501.jpg",
    }
        IsSuccess: true,
        ResultCode: 0,
        ResultMessage: "请求成功...",
}

fileinfo 用于传值给子组件，子组件中有对应的 props，如下

  props: ["fileinfo"],

a-upload 组件中有个名叫 beforeUpload 的钩子函数，我们用来校验上传的文件，如果通过校验，则上传

beforeUpload(file) {
      var that = this;
      //console.log(file);
      return new Promise((resolve, reject) => {
        const isLt100M = file.size / 1024 / 1024 > that.fileinfo.maxsize;
        if (isLt100M) {
          this.$message.warning(
            "上传附件大小不能超过" + that.fileinfo.maxsize + "M。"
          );
          return reject(false);
        }
        var index = file.name.lastIndexOf(".");
        var suffix = file.name.substring(index + 1);
        if( that.fileinfo.filetype.indexOf(suffix)<0){
              this.$message.warning(
            "上传的文件格式不符合要求"
          );
          return reject(false);
        }
        return resolve(true);
      });
    },

fileRemove 方法用来同步移除 uploadfiles 的元素，保持和组件显示的上传文件一致。

    fileRemove(file) {
      //console.log(file);
      var that = this;
      for (var i = 0; i < that.fileinfo.uploadfiles.length; i++) {
        if (
          that.fileinfo.uploadfiles[i].oldfilename == file.name &&
          that.fileinfo.uploadfiles[i].filesize == file.size
        ) {
          that.fileinfo.uploadfiles.splice(i, 1);
          //alert(1)
        }
      }
    },

在组件开发阶段，遇到一个问题，上传成功后，上传的状态一直是 uploading ，为了解决这个问题，我们需要在 filechange、customRequest、saveFile 一起解决。

主要是在 filechange 中给filelist赋值，在 saveFile 中当文件上传成功后，修改状态为done，如果上传失败，我们需要将filelist中上传失败的元素移除。

    filechange(info) {
      //console.log(info);
      this.fileList = info.fileList;
      //console.log(this.fileList);

      if (info.file.status == "uploading") {
      }
      if (info.file.status === "done") {
      } else if (info.file.status === "error") {
      }
    },
    customRequest(data) {
      // 上传提交
      const formData = new FormData();
      formData.append("file", data.file);
      this.saveFile(formData);
    },
    saveFile(formData) {
      let that = this;

      this.$axios({
        url: "/api/File/UploadFileStream",
        method: "post",
        data: formData,
      })
        .then(function (result) {
          //console.log(result);
          //that.fileList.push(result.Data)
          if (result.IsSuccess) {
            for (var i = 0; i < that.fileList.length; i++) {
              that.fileList[i].status = "done";
            }
            console.log(that.fileinfo.uploadfiles);
            that.fileinfo.uploadfiles.push(result.Data);

            that.$message.success("上传附件成功。");
          } else {
            //that.fileList = [];
            for (var i = 0; i < that.fileList.length; i++) {
              if (that.fileList[i].status != "done") {
                that.fileList.splice(i, 1);
              }
            }
            that.$message.warning(result.ResultMessage);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

以上便是整个上传组件。效果图有点丑

 在父组件，点击提交，即可得到请求上传接口的返回值

 这样整个组件也就做完了，有了这个组件，以后我们只需在父组件中引用子组件，并添加Props传值对象fileinfo即可，从而节省了大量的重复代码。

下面是C#的后端，不做解释，只贴代码。详细可参考：https://www.cnblogs.com/chenwolong/p/Uplode.html

using Iot.Common;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web;
using System.Web.Http;
using System.Web.Http.Cors;

namespace Iot.WebSite.Controllers.Apis
{
    [RoutePrefix("api/file")]
    [EnableCors(origins: "*", headers: "*", methods: "GET,POST,PUT,DELETE")]
    public class FileController : ApiController
    {
        /// 

        /// 上传文件
        /// 
        /// 
        [HttpPost]
        public async Task UploadFileStream()
        {
            var returns = CommonBaseResponse.SetResponse(null, false);
            string fileType = "OTA";//要创建的子文件夹的名字
            var uploadPath = "~/Content";
            string filePath = System.Web.HttpContext.Current.Server.MapPath(uploadPath + "/" + fileType + "/");//绝对路径
            //string filePath = uploadPath + "\\" + fileType + "\\";  //E:\Fileup  居家
            if (Directory.Exists(filePath) == false)
            {
                Directory.CreateDirectory(filePath);
            }
            try
            {
                var provider = new ReNameMultipartFormDataStreamProvider(filePath);
                await Request.Content.ReadAsMultipartAsync(provider).ContinueWith(o =>
                {

                    foreach (var file in provider.FileData)
                    {
                        string orfilename = file.Headers.ContentDisposition.FileName.TrimStart('"').TrimEnd('"');//待上传的文件名
                        FileInfo fileinfo = new FileInfo(file.LocalFileName);
                        //判断开始
                        string oldName = orfilename;//选择的文件的名称
                        string fileExt = orfilename.Substring(orfilename.LastIndexOf('.'));
                        string Extension = fileExt;
                        string CreateTime = DateTime.Now.ToString("yyyyMMddHHmmss");

                        fileInfoModel fileResult = new fileInfoModel()
                        {
                            oldfilename = oldName,
                            LocalFilePath = file.LocalFileName,
                            filesize = fileinfo.Length,
                            filename = fileinfo.Name,
                            filepath = uploadPath + "/" + fileType + "/" + fileinfo.Name
                        };

                        var fs = fileinfo.OpenRead();
                        byte[] buffur = new byte[fs.Length];
                        fs.Read(buffur, 0, (int)fs.Length);
                        fileResult.filedata = buffur.ToList();
                        returns = CommonBaseResponse.SetResponse(fileResult, true);
                    }
                });
            }
            catch (Exception ex)
            {
                LogHelper.WriteLog("上传附件出错：" + ex.ToString());
            }
            return returns;
        }
    }
    /// 

    /// 重命名上传的文件
    /// 
    public class ReNameMultipartFormDataStreamProvider : MultipartFormDataStreamProvider
    {
        public ReNameMultipartFormDataStreamProvider(string root)
            : base(root)
        { }

        public override string GetLocalFileName(System.Net.Http.Headers.HttpContentHeaders headers)
        {

            string extension = !string.IsNullOrWhiteSpace(headers.ContentDisposition.FileName) ? Path.GetExtension(GetValidFileName(headers.ContentDisposition.FileName)) : "";
            return Guid.NewGuid().ToString().Replace("-", "") + extension;
        }

        private string GetValidFileName(string filePath)
        {
            char[] invalids = System.IO.Path.GetInvalidFileNameChars();
            return String.Join("_", filePath.Split(invalids, StringSplitOptions.RemoveEmptyEntries)).TrimEnd('.');
        }

    }

    public class fileInfoModel
    {
        /// 

        /// 新文件名称
        /// 
        public string filename { get; set; }
        /// 

        /// 老文件名称
        /// 
        public string oldfilename { get; set; }
        /// 

        /// 服务器绝对地址
        /// 
        public string LocalFilePath { get; set; }
        /// 

        /// 文件大小 字节
        /// 
        public long filesize { get; set; }
        /// 

        /// 问价数据
        /// 
        public List<byte> filedata { get; set; }
        /// 

        /// 文件相对路径
        /// 
        public string filepath { get; set; }
    }
}

增删改查代码，只做记录，方便自己以后查看

@天才卧龙的博客