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