C#+Vue实现文件的前后端传输完整版（附完整版代码）

最近笔者也遇到了这样的一个需求，页面上传一张图片给后台，后台存储在一个文件夹中，以便后续在调用该图片。
我也看了很多很多的博客，大都是一半都在说前端的事情 ，一半都在说后端的事情，没有很好的衔接在一起，经过一下午的研究，笔者终于实现了该功能。下面就有笔者慢慢的说吧。

第一步：在Vue中创建一个页面用于图片上传。

<template>
	<div class="Thisform">
      <el-form ref="form" :model="form" label-width="80px">
       	<el-form-item label="咖啡图片:">
          <input type="file" @change="getFile($event)">
        </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>
</template>

<script>
export default {
  data() {
    return {
      form: {
      },
       file: '',
    };
  },
  methods: {
    onSubmit() {
      let that = this;
      event.preventDefault();//取消默认行为
      //创建 formData 对象
      let param = new FormData();
      param.append("file", this.file);
      this.$axios.post('https://localhost:44373/api/coffee/GetImage', param, {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
      .then(response=> {
      	console.log(response);
      })
    },
   
    getFile(event) {
      this.file = event.target.files[0];
      console.log(this.file);
    },
    
<style scoped>
.Thisform {
  width: 30%;
  padding-left: 500px;
  padding-top: 50px;
}
</style>

代码结果：

至此前端的操作已经基本完成了，前端就很干脆地选择一张图片然后传送到后端。传送的方式是使用axios进行前后端传输，axios给予3个参数，第一个是接口，第二个是数据（这里存放的是一张图片的字节数组），第三个是需要修改的抬头，因为传输的是文件，所以抬头要改为multipart/form-data。

 let param = new FormData();
 param.append("file", this.file);
this.$axios.post('https://localhost:44373/api/coffee/GetImage', param, {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })

第二步：后台创建一个接口来接收前端传过来的参数。

后台需要做的操作：

1. 接收图片内容
2. 通过流写入自己定义的一个文件夹中
3. 返回这个图片的物理地址

GetImage接口：

[HttpPost]
public string GetImage()
{
   string strWebPath = "false";
   //首先先确定请求里夹带的文件数量
   var files = HttpContext.Current.Request.Files;
   //如果存在文件
   if (files.AllKeys.Any())
   {
       using (HttpClient client = new HttpClient())
       {
           HttpContextBase HttpContext = (HttpContextBase)Request.Properties["MS_HttpContext"];
			//获取到文件流
           var text = HttpContext.Request.Files[0].InputStream;
			//获取你的根目录
           string path = HttpContext.Request.MapPath("~/");
           string datetime = GetTimeStamp();
           //这里要先要建立File文件夹，不然会报错，也可以自己写一个检测文件夹
           string strPath = path + "File\\" + datetime+".jpg";
           //需要用到下一步的帮助类将其保存为文件
           StreamHelp.StreamToFile(text, strPath);
       }
       //return "添加成功";
   }
   return strWebPath;
}

 ///获取时间戳的方法
private string GetTimeStamp()
{
    TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
    return Convert.ToInt64(ts.TotalMilliseconds).ToString();
}

StreamHelp类：

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

这样图片的前后端传输就成功了。后续就可以进行其他的像写入数据库等操作。