WEBAPI返回图片显示在VUE前端

文章讲解了如何在ASP.NETCore的控制器中通过Opencvsharp进行图像旋转操作,并在Vue中使用axios发起GET请求调用API。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

WEBAPI部分

通过nuget安装Opencvsharp ,这部分用来做图像处理

在controller中写如下方法,我要对原图进行旋转使用了Opencv,如果不需要旋转可以用注释的代码

        [HttpGet(Name = "ShowImage")]
        public async Task<IActionResult> ShowImage(string FileName)
        {
            // return PhysicalFile(FileName, "image/jpeg");
            Mat mat = new Mat();
            mat = Cv2.ImRead(FileName);
            Cv2.Rotate(mat, mat, RotateFlags.Rotate90Counterclockwise);

          
            MemoryStream stream = mat.Clone().ToMemoryStream(Path.GetExtension(FileName));
            // using (FileStream fileStream = new FileStream(FileName, FileMode.Open)) 
            //{
            //    int len = (int)fileStream.Length;
            //    byte[] buf = new byte[len];
            //    fileStream.Read(buf, 0, len);
            //    stream = new MemoryStream();
            //    stream.Write(buf, 0, len);
            //}
            return await Task.FromResult<FileResult>(File(stream.ToArray(), "image/jpeg"));

        }

Vue前端部分

通过axios调用controller中的ShowImage

Html部分
		<el-col :span="3">
					<el-button type='primary' class="el-btn" @click="DrawImage">图片</el-button>
				</el-col>

			<el-row>
				<!-- <img :src="FoamImageFile"/> :fit="fits" style="width: 100px; height: 100px"-->
				<el-image :src="FoamImageFileURL" :preview-src-list="[FoamImageFileURL]" />
			</el-row>


script部分

let FoamImageFile = ref<any>('/assets/img/abc.bmp')  // 图片所所在目录地址
let FoamImageFileURL = ref<any>('http://localhost:8100/assets/img/abc.bmp') //url地址

const DrawImage = async () => {
	console.log('FoamImageFile ', FoamImageFile)
	await axios.get(global_const.WEBAPI + `LMI3DCamera/ShowImage`, {  //params参数必写 , 如果没有可传参数,传{}以 JSON.stringify(cmdParam1)
		params: { FileName: FoamImageFile.value }
	})
		.then(function (response) {
			console.log('DrawImage ok');
			console.log(response);

			console.log('response.request.responseURL');
			console.log(response.request.responseURL);
			FoamImageFileURL.value = response.request.responseURL

			console.log('FoamImageFile ', FoamImageFile)
			//FoamImageFile.value=response.data
			return response.data;
		})
		.catch(function (error) {
			//ElMessage.error(cmd + '命令执行异常!' + error)
			console.log(error);
		});
}

### 集成Vue.js.NET Web API项目的方法 #### 使用预构建模板简化集成过程 为了更方便地创建一个集成了Vue.js.NET Web API项目,可以采用官方提供的`dotnet new vue`命令来初始化一个新的Vue单页应用程序(SPA)项目[^2]。此命令会自动配置好必要的文件结构以及基础设置。 ```bash dotnet new vue npm install ``` 这段脚本首先通过`.NET CLI`工具新建了一个基于Vue框架搭建起来的应用程序实例;随后执行了`npm install`指令用于下载并安装所有依赖项至本地环境中去。 #### 构建高效的前后端通信机制 当涉及到前后端之间的数据交换时,应当遵循RESTful原则设计API接口,并确保这些服务能够被JavaScript客户端所调用。对于每一个控制器而言,在定义GET/POST等标准HTTP动词对应的动作之外,还可以额外添加OPTIONS方法以便处理CORS请求验证等问题[^4]: ```csharp public class WeatherForecastController : ControllerBase { ... [HttpOptions] public IActionResult Options() { Response.Headers.Add("Allow", "GET, POST, PUT, DELETE"); return Ok(); } } ``` 上述代码片段展示了如何向WeatherForecast控制器中加入一个简单的选项处理器,它允许特定类型的HTTP请求访问资源的同时返回成功响应给浏览器端。 #### 应用现代化前端开发工具链 考虑到现代Web应用通常需要复杂的资产管理和优化流程,因此推荐引入像Webpack这样的模块捆绑器作为解决方案的一部分。借助于其强大的插件生态系统,不仅可以实现按需加载、懒加载等功能特性,还能轻松完成CSS/SASS编译、图片压缩等一系列任务。与此同时,也建议启用热重载(Hot Module Replacement),这有助于提高迭代速度,减少调试时间成本[^3]。 #### 维护良好的编码习惯与文档记录 最后但同样重要的是保持清晰易懂且一致性的编程风格,无论是服务器侧还是客户机部分都应该如此。另外,撰写详尽的技术说明文档可以帮助团队成员更好地理解整个系统的运作原理及其内部逻辑关系,从而促进协作效率提升。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值