C#+Vue实现文件的前后端传输完整版(附完整版代码)
最近笔者也遇到了这样的一个需求,页面上传一张图片给后台,后台存储在一个文件夹中,以便后续在调用该图片。我也看了很多很多的博客,大都是一半都在说前端的事情 ,一半都在说后端的事情,没有很好的衔接在一起,经过一下午的研究,笔者终于实现了该功能。下面就有笔者慢慢的说吧。第一步:在Vue中创建一个页面用于图片上传。<template><div class="Thisform">&l
·
最近笔者也遇到了这样的一个需求,页面上传一张图片给后台,后台存储在一个文件夹中,以便后续在调用该图片。
我也看了很多很多的博客,大都是一半都在说前端的事情 ,一半都在说后端的事情,没有很好的衔接在一起,经过一下午的研究,笔者终于实现了该功能。下面就有笔者慢慢的说吧。
第一步:在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"
}
})
第二步:后台创建一个接口来接收前端传过来的参数。
后台需要做的操作:
- 接收图片内容
- 通过流写入自己定义的一个文件夹中
- 返回这个图片的物理地址
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;
}
}
这样图片的前后端传输就成功了。后续就可以进行其他的像写入数据库等操作。
更多推荐
已为社区贡献1条内容
所有评论(0)