一、实现思路

1.前端单独写一个转图片的组件imageUpload.vue，并设置路由/imageUpload,当访问地址http://10.18.0.200:8081/imageUpload 时，调用imageUpload.vue组件。当前项目的运行地址http://10.18.0.200:8081

2.后端向前端推送消息topic,同时后端（服务器端）启动浏览器进程打开一个新页面，模拟地址栏地址中输入http://10.18.0.200:8081/imageUpload请求----即调用了imageUpload.vue组件（初始化，进行了websocket连接）。因为是后端启动的浏览器进程，所以在前端（浏览器端）看来并没有打开新页面，用户感知不到。但是测试的时候你可以通过自己访问http://10.18.0.200:8081/imageUpload 来进行测试

3.imageUpload.vue中的逻辑

1）定义一个websocket，订阅后端推送的消息topic（消息里有转图片需要的原始数据），一旦接收到后端返回的数据，就放在一个数组todoList中

2）当监听到todoList的变化时，将数据转换成转图片需要的数据，转成图片，将图片（formData的格式）回传给后端。

3）每次处理完一条数据就从todoList删除第一条数据,当有数据时每次都取第一条数据进行2）中的处理

二、代码

注：此处只提供前端向后端传图片思路的大致框架，不能正常运行。转图片的代码未提供，还需整理。

<template><div><!--转图片组件 省略传参之类的,此处只提供思路--><MakeImage class="makeImage"></MakeImage></div>
</template>
<script>
// 转图片组件
import MakeImage from "./riskAssessment/MakeImage";
// 回传图片接口、获取mqtt连接地址、用户名和密码的接口
import { _uploadAssessmentImage, _getEMQ } from "@/api/riskAssessmentAPI.js";
import mqtt from "mqtt";
export default {data() {return {// 定义websocketwebsocket: null,// 需要回传的队列todoList: [],};},async mounted() {console.log("imageUpload mounted");// 获取连接信息let connectMessage = await this.getEMQ();console.log("connetMessage", connectMessage);let wsUrl = connectMessage.url;let options = {username: connectMessage.username,password: connectMessage.password,};console.log("connect url:", wsUrl, options);this.websocket = mqtt.connect(wsUrl, options);// 重连this.websocket.on("reconnect", (error) => {console.log("正在重连:", error);});// 建立连接,订阅主题this.websocket.on("connect", () => {// 订阅 回传评估结果的主题this.websocket.subscribe("vte/asset/report", (error) => {if (error) {console.log("error:", err);} else {console.log("回传评估结果 sub success");}});});// 连接失败this.websocket.on("error", (error) => {console.log("连接失败:", error);});// 接收到服务器消息时this.websocket.on("message", (topic, message) => {console.log("websocket message", JSON.parse(message.toString()), topic);// 获取评估结果let assessmentReport = JSON.parse(message.toString());this.todoList.push(assessmentReport);});// 关闭连接时this.websocket.on("close", () => {console.log("close");});},methods: {//获取mqtt连接地址、用户名和密码getEMQ({ commit }) {return new Promise((resolve, reject) => {_getEMQ().then((res) => {const { data } = res;commit("SETMQCONFIG", JSON.parse(data));resolve(JSON.parse(data));});});},//  获取转图片所需数据async getImageData(todoData) {// 数据处理，处理为转图片需要的数据},// 回传图片uploadAssessmentImage(imageobject) {console.log("imageobject", imageobject);let params = {bucket: "test",};_uploadAssessmentImage(imageobject.formdata, params).then((result) => {this.todoList.shift();}).catch((error) => {console.log("error", error);this.todoList.shift();});},//生成图片async createImages(todoData) {//  获取转图片所需数据await this.getImageData(todoData);//   转图片let imageDoms = document.getElementsByClassName("makeImage");// 兼容有多条数据同时需要转图片的情况Object.keys(imageDoms).map(async (item, index) => {console.log("imageDoms", item, index, imageDoms[index]);// 调用转图片方法生成图片await imageDoms[index]["__vue__"].handlePrint(index);});},},watch: {todoList: {async handler(newval) {console.log("todoList", newval, newval.length);//队列里有数据再回传if (newval.length > 0) {console.log("回传评估结果图片");//获取转图像需要的数据await this.createImages([newval[0]]);}},},},
};
</script>

三、注意事项

1.如果进入 http://10.18.0.200:8081/imageUpload 页面有权限，需要重新登录等，需要手动在imageUpload的mounted函数中进行处理。比如直接进入这个页面会有重新登录的提示，那么你应该在imageUpload中手动调用登录函数登录，以便imageUpload组件能够被正常加载。

感谢chl的指导！

希望对你有帮助！

如有错误，欢迎指正！非常感谢！

图片从前端回传到后端实现思路总结相关推荐

小猿圈Python学习教程之后端接收前端回传的文件方法
现在人工智能已经深入到千家万户,随之而来的就是python技术的火爆,今天小猿圈python讲师为你讲解一下后端接收前端回传的文件方法,希望对于刚刚自学python的你有一定的帮助. 如下所示: fi ...
【前端44_前后端交互_跨域】前端解决：JSONP、后端解决：CORS 、后端代理
文章目录跨域什么是跨域前端解决: JSONP 实现原理步骤前端:创建标签,拼接传递参数后端:接收值,返回值封装 Ajax 代码在封装的 Ajax 中添加 JSONP 需求思路练习: ...
Web前端 VS Web后端
想从事软件业的毕业生们大多要从基础的程序员做起.相较于其他的职位,Web软件开发工程师是一个技术要求较高.前景较好的工作.Web软件开发工程师可以分为Web前端和后端开发.那什么是Web前端,什么是W ...
前端基于gulp后端基于freemarker的工作流程总结
前言最近在做一个PC端的项目,由于项目需要兼容到IE8,所以从技术选型上采取了公司之前一直沿用的前端基于gulp后端基于freemarker的模式来进行开发. 那么gulp+freemarker这种 ...
SSH2 后端编程思路总结
课程快结束了,那我就总结一下利用SSH2框架设计网站后端的思路吧. 网站的后端设计大部分操作都是数据的存取,那么就总结一下Strut2中后端操作以及几点要注意的事项吧. 后端操作:后端的操作基本上都是 ...
相对于就业来讲，前端工程师和后端开发哪个比较好？
在开始这个问题前,先说一下前端和后端两者之间都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到.虽然前端开发和后端开发的工作有巨大 ...
面试须知的前端渲染和后端渲染
在网上查找了很久的前端渲染和后端渲染的区别,最后总算在知乎上看到了一个比较清楚的解释,感谢万分! 作者:iakul 链接:https://www.zhihu.com/question/28725977 ...
IT前端开发和后端开发
前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到.虽然前端开发和后端开发的工作有巨大的区别,但是他们的工作都是 ...
如何区分前端BUG和后端BUG
1.如何区分前端和后端通俗讲,用户看到的部分都叫前端. 而用户看不到的部分可以统称为后端. 2.前端和后端的呈现形式前端的呈现形式有web端.移动端(ios.安卓).小程序等. 后端系统一般只有一 ...

图片从前端回传到后端实现思路总结

一、实现思路

3.imageUpload.vue中的逻辑

二、代码

三、注意事项

图片从前端回传到后端实现思路总结相关推荐

最新文章

热门文章