标签：files netcore fileFolder file 3.1 var message 上传

概括

本文后端使用 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 });
        }

标签：files,netcore,fileFolder,file,3.1,var,message,上传
来源： https://www.cnblogs.com/rush-peng/p/15055029.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。