一、實現(xiàn)思路

1.前端單獨寫一個轉(zhuǎn)圖片的組件imageUpload.vue，并設置路由/imageUpload,當訪問地址http://10.18.0.200:8081/imageUpload 時，調(diào)用imageUpload.vue組件。當前項目的運行地址http://10.18.0.200:8081

2.后端向前端推送消息topic,同時后端（服務器端）啟動瀏覽器進程打開一個新頁面，模擬地址欄地址中輸入http://10.18.0.200:8081/imageUpload請求----即調(diào)用了imageUpload.vue組件（初始化，進行了websocket連接）。因為是后端啟動的瀏覽器進程，所以在前端（瀏覽器端）看來并沒有打開新頁面，用戶感知不到。但是測試的時候你可以通過自己 訪問http://10.18.0.200:8081/imageUpload 來進行測試

3.imageUpload.vue中的邏輯

1）定義一個websocket，訂閱后端推送的消息topic（消息里有轉(zhuǎn)圖片需要的原始數(shù)據(jù)），一旦接收到后端返回的數(shù)據(jù)，就放在一個數(shù)組todoList中

2）當監(jiān)聽到todoList的變化時，將數(shù)據(jù)轉(zhuǎn)換成轉(zhuǎn)圖片需要的數(shù)據(jù)，轉(zhuǎn)成圖片，將圖片（formData的格式）回傳給后端。

3）每次處理完一條數(shù)據(jù)就從todoList刪除第一條數(shù)據(jù),當有數(shù)據(jù)時每次都取第一條數(shù)據(jù)進行2）中的處理

二、代碼

注：此處只提供前端向后端傳圖片思路的大致框架，不能正常運行。轉(zhuǎn)圖片的代碼未提供，還需整理。

<template><div><!--轉(zhuǎn)圖片組件 省略傳參之類的,此處只提供思路--><MakeImage class="makeImage"></MakeImage></div> </template> <script> // 轉(zhuǎn)圖片組件 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", () => {// 訂閱 回傳評估結(jié)果的主題this.websocket.subscribe("vte/asset/report", (error) => {if (error) {console.log("error:", err);} else {console.log("回傳評估結(jié)果 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);// 獲取評估結(jié)果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));});});},// 獲取轉(zhuǎn)圖片所需數(shù)據(jù)async getImageData(todoData) {// 數(shù)據(jù)處理，處理為轉(zhuǎn)圖片需要的數(shù)據(jù)},// 回傳圖片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) {// 獲取轉(zhuǎn)圖片所需數(shù)據(jù)await this.getImageData(todoData);// 轉(zhuǎn)圖片let imageDoms = document.getElementsByClassName("makeImage");// 兼容有多條數(shù)據(jù)同時需要轉(zhuǎn)圖片的情況Object.keys(imageDoms).map(async (item, index) => {console.log("imageDoms", item, index, imageDoms[index]);// 調(diào)用轉(zhuǎn)圖片方法生成圖片await imageDoms[index]["__vue__"].handlePrint(index);});},},watch: {todoList: {async handler(newval) {console.log("todoList", newval, newval.length);//隊列里有數(shù)據(jù)再回傳if (newval.length > 0) {console.log("回傳評估結(jié)果圖片");//獲取轉(zhuǎn)圖像需要的數(shù)據(jù)await this.createImages([newval[0]]);}},},}, }; </script>

三、注意事項

1.如果進入?http://10.18.0.200:8081/imageUpload??頁面有權限，需要重新登錄等，需要手動在imageUpload的mounted函數(shù)中進行處理。比如直接進入這個頁面會有重新登錄的提示，那么你應該在imageUpload中手動調(diào)用登錄函數(shù)登錄，以便imageUpload組件能夠被正常加載。

/*

感謝chl的指導！

希望對你有幫助！

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

*/

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。