无锡百姓网推广代理商_苏州建筑工程有限公司_关键词的优化方法_免费引流人脉推广软件

webapi+vue3实现前后端图片传输

2.前端代码

<template><div class="Thisform"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="咖啡图片:"><input type="file" @change="getFile" /></el-form-item><el-form-item style="padding-left:50px"><el-button type="primary" @click="onSubmit">立即添加</el-button><el-button @click="toSelectCoffee">取消</el-button></el-form-item></el-form><!-- 显示上传后的图片 --><div v-if="imageUrl" class="image-preview"><p>上传成功！</p><img :src="imageUrl" alt="上传的图片" width="200" /></div></div></template><script setup>
import { ref } from 'vue';
import axios from 'axios';// 使用 ref() 来创建响应式数据
const file = ref(null); // 用来保存上传的文件
const imageUrl = ref(''); // 用来保存上传成功后图片的URL// 提交表单的处理函数
const onSubmit = async (event) => {event.preventDefault(); // 取消默认行为if (!file.value) {console.log("没有选择文件");return;}// 创建 FormData 对象const param = new FormData();param.append("file", file.value);try {// 发送 POST 请求上传文件const response = await axios.post('http://localhost:19001/api/dangerouspackboxinfo/getimage', param, {headers: {"Content-Type": "multipart/form-data"}});// 输出返回的文件路径console.log(response.data.data);// 假设返回的是图片的 URLimageUrl.value = `http://localhost:19001${response.data.data}`; // 设定返回的图片 URL// 打印 imageUrl.value，查看存储的值console.log("上传成功后的图片 URL:", imageUrl.value);} catch (error) {console.error('上传失败:', error);}
};// 处理文件选择的函数
const getFile = (event) => {file.value = event.target.files[0];console.log(file.value); // 打印选中的文件
};// 取消操作（你可以根据需求实现）
const toSelectCoffee = () => {console.log("取消操作");
};
</script><style scoped>.Thisform {width: 30%;padding-left: 500px;padding-top: 50px;}</style>

3.后端接口

 [HttpPost("GetImage")]public async Task<string> GetImage(IFormFile file){if (file == null || file.Length == 0){return "没有上传文件.";}// 获取当前项目的根目录var uploadPath = Path.Combine(_hostingEnvironment.ContentRootPath, "wwwroot", "File/images");// 检查文件夹是否存在，如果不存在则创建if (!Directory.Exists(uploadPath)){Directory.CreateDirectory(uploadPath);}// 获取文件扩展名并生成新的文件名var fileExtension = Path.GetExtension(file.FileName);var datetime = GetTimeStamp();var fileName = $"{datetime}{fileExtension}";  // 使用时间戳作为文件名// 文件完整路径var filePath = Path.Combine(uploadPath, fileName);// 保存文件using (var fileStream = new FileStream(filePath, FileMode.Create)){await file.CopyToAsync(fileStream);}// 返回文件的相对路径var fileUrl = "/File/images/" + fileName;return fileUrl;  // 返回成功并附带文件路径}///获取时间戳的方法private string GetTimeStamp(){TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);return Convert.ToInt64(ts.TotalMilliseconds).ToString();}

辅助类

  public static class StreamHelp{/// <summary>/// 流转文件/// </summary>/// <param name="stream"></param>/// <param name="fileName"></param>public static void StreamToFile(Stream stream, string fileName){// 把 Stream 转换成 byte[] byte[] bytes = new byte[stream.Length];stream.Read(bytes, 0, bytes.Length);// 设置当前流的位置为流的开始 stream.Seek(0, SeekOrigin.Begin);// 把 byte[] 写入文件 FileStream fs = new FileStream(fileName, FileMode.Create);BinaryWriter bw = new BinaryWriter(fs);bw.Write(bytes);bw.Close();fs.Close();}/// <summary>/// 文件转流/// </summary>/// <param name="fileName"></param>/// <returns></returns>public static Stream FileToStream(string fileName){// 打开文件 FileStream fileStream = new FileStream(fileName, FileMode.Open, FileAccess.Read, FileShare.Read);// 读取文件的 byte[] byte[] bytes = new byte[fileStream.Length];fileStream.Read(bytes, 0, bytes.Length);fileStream.Close();// 把 byte[] 转换成 Stream Stream stream = new MemoryStream(bytes);return stream;}/// <summary>/// 流转Bytes/// </summary>/// <param name="stream"></param>/// <returns></returns>public static byte[] StreamToBytes(Stream stream){byte[] bytes = new byte[stream.Length];stream.Read(bytes, 0, bytes.Length);// 设置当前流的位置为流的开始 stream.Seek(0, SeekOrigin.Begin);return bytes;}/// <summary>/// Bytes转流/// </summary>/// <param name="bytes"></param>/// <returns></returns>public static Stream BytesToStream(byte[] bytes){Stream stream = new MemoryStream(bytes);return stream;}}