概括

本文后端使用 netcore 3.1，前端使用 vue 2.x 开发，本文也借鉴了很多人写的博客，但是其中相当一部分代码根本跑不通。再者就是没有充分使用element-ui封装好的组件，大量的自己书写js代码，看起来比较费劲，还有部分未做到前后端的分离，把本应该前端做的事情，交给了后端。这大概是后端出生的程序员的通病吧，哈哈，其实我也经常这样。于是抽时间整理了一下，记录如下

前端代码（使用vue2.x + elementui组件库）

<template>
  <div>
    <el-upload class="upload-demo" drag action="http://localhost:5000/image/up" accept=".jpg, .png"
      :on-success="handleSuccess" :on-error="handleError" :before-upload="handleBeforeUpload"
      :on-progress="handleProgress" multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <!-- 下面是存放在wwwroot目录下的文件预览 -->
    <img src="http://localhost:5000/images/20210719202940.jpg" alt="一张图片">
  </div>
</template>

<script>
  export default {
    data() {
      return {};
    },

    created() {},
    mounted() {},

    methods: {
      handleSuccess(response, file, fileList) {//上传成功以后的回调函数 
        this.$message('上传成功');
      },
      handleError() {//上传失败的回调函数
        this.$message.error("上传失败,请重新上传图片!");
      },
      handleBeforeUpload(file) {//在真正的上传之前，做一些判断
        var _this = this;
        const isImage = file.type.includes("image");
        if (!isImage) {
          _this.$message.error("上传文件类型必须是图片!");
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          _this.$message.error('图片太大了');
        }
        return isImage && isLt2M;
      },
      handleProgress(event, file, fileList) {//上传时触发的时间
        this.loading = true; //  上传时执行loading事件
      }
    },
    components: {}
  };
</script>

后端代码

        [HttpPost("up")]
        public IActionResult AddImageAsync()
        {
            var files = Request.Form.Files; // 从文件流中读不到
            long size = files.Sum(f => f.Length);
            var fileFolder = Path.Combine(_hostevn.WebRootPath, "Images");

            if (!Directory.Exists(fileFolder))
            {
                Directory.CreateDirectory(fileFolder); //创建的文件夹
            }


            foreach (var file in files)
            {
                if (file.Length > 0)
                {
                    var fileName = DateTime.Now.ToString("yyyyMMddHHmmss") +
                                   Path.GetExtension(file.FileName);
                    var filePath = Path.Combine(fileFolder, fileName);

                    using (FileStream fs = System.IO.File.Create(filePath))
                    {
                        file.CopyTo(fs);
                        fs.Flush();
                    }
                }
            }
            return Ok(new { count = files.Count, size });
        }