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

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);

    // 假设返回的是图片的 URL
    imageUrl.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;
      }
  }