一、實現思路

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的指導！

希望對你有幫助！

如有錯誤，歡迎指正！非常感謝！

*/

總結

以上是生活随笔為你收集整理的图片从前端回传到后端实现思路总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。