Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件 (2)

在页面上新增一个按钮，用来手动触发上传

<div> <button @click="btnClick">选择文件</button> <button @click="uploadClick">立即上传</button> <input type="file" placeholder="请选择文件" ref="fileSelector" @change="fileChange" multiple /> <div> <img v-for="(item, i) in data.imgList" :key="i" :src="item.base64" /> </div> <div> <p v-for="(item, i) in data.logs" :key="i">{{ item.log }}</p> </div> </div>

点击 立即上传 按钮，触发上传

const uploadClick = () => { data.files.forEach((file) => { uploadServer(file); }); };

服务器接收

在服务器编程中，我们使用C#来接收上传的文件。

/// <summary> /// 上传 /// </summary> /// <param></param> /// <returns></returns> [HttpPost("/upload")] public async Task<IActionResult> Upload([FromServices] IWebHostEnvironment host) { var files = Request.Form.Files; long size = files.Sum(f => f.Length); List<string> list = new List<string>(); foreach (var formFile in files) { if (formFile.Length > 0) { var path = Path.Combine(host.WebRootPath, "files"); if (!Directory.Exists(path)) { Directory.CreateDirectory(path); } string fileName = $"{Guid.NewGuid():N}{Path.GetExtension(formFile.FileName)}"; path = Path.Combine(path, fileName); var filePath = path; using var stream = System.IO.File.Create(filePath); await formFile.CopyToAsync(stream); var c = Path.VolumeSeparatorChar; list.Add($"{Request.Scheme}://{Request.Host.Value}/{Path.Combine("files", fileName).Replace(Path.DirectorySeparatorChar, Path.AltDirectorySeparatorChar)}"); } } return Ok(new { list = list, size }); }

使用dotnet run运行asp.net core服务端。然后点击上传，你以为就上传成功了吗？
不！没那么简单。如果如果vue程序和asp.net core程序，不在同一个域名下，你还得处理上传跨域问题。当然这个问题在asp.net core中是非常简单的。只需要简单配置一下即可

如果在IIS或者Nginx下，就需要修改对应站点的配置文件了。当然具体服务器软件的配置不在本篇文章的讨论之下。有需要的同学可以私下交流
asp.net core跨域处理

app.UseCors(options => { options.WithOrigins("http://localhost:3000", "http://127.0.0.1", "http://localhost:8080"); // 允许特定ip跨域 options.AllowAnyHeader(); options.AllowAnyMethod(); options.AllowCredentials(); });

以上配置必须要放在app.UseStaticFiles();之前才会生效。

上传成功后，你就会在服务器的wwwroot的files文件夹中看到上传的图片文件了。

本文完成了基本的功能，起一个抛砖引玉的作用。更多功能，如:文件类型限制，文件大小限制等，可以根据使用场景自定义扩展

本篇vue 3.0文件上传组件开发到这里就结束了。
更多干货，以及本文的示例代码， 欢迎关注我的公众号: 青城同学 回复 文件上传 获取下载地址
当然也可以扫码

欢迎转载，请注明出处以及不要随意删改内容