一、實(shí)現(xiàn)思路

1.前端單獨(dú)寫(xiě)一個(gè)轉(zhuǎn)圖片的組件imageUpload.vue，并設(shè)置路由/imageUpload,當(dāng)訪問(wèn)地址http://10.18.0.200:8081/imageUpload 時(shí)，調(diào)用imageUpload.vue組件。當(dāng)前項(xiàng)目的運(yùn)行地址http://10.18.0.200:8081

2.后端向前端推送消息topic,同時(shí)后端（服務(wù)器端）啟動(dòng)瀏覽器進(jìn)程打開(kāi)一個(gè)新頁(yè)面，模擬地址欄地址中輸入http://10.18.0.200:8081/imageUpload請(qǐng)求----即調(diào)用了imageUpload.vue組件（初始化，進(jìn)行了websocket連接）。因?yàn)槭呛蠖藛?dòng)的瀏覽器進(jìn)程，所以在前端（瀏覽器端）看來(lái)并沒(méi)有打開(kāi)新頁(yè)面，用戶(hù)感知不到。但是測(cè)試的時(shí)候你可以通過(guò)自己 訪問(wèn)http://10.18.0.200:8081/imageUpload 來(lái)進(jìn)行測(cè)試

3.imageUpload.vue中的邏輯

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

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

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

二、代碼

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

<template><div><!--轉(zhuǎn)圖片組件 省略傳參之類(lèi)的,此處只提供思路--><MakeImage class="makeImage"></MakeImage></div> </template> <script> // 轉(zhuǎn)圖片組件 import MakeImage from "./riskAssessment/MakeImage"; // 回傳圖片接口、獲取mqtt連接地址、用戶(hù)名和密碼的接口 import { _uploadAssessmentImage, _getEMQ } from "@/api/riskAssessmentAPI.js"; import mqtt from "mqtt"; export default {data() {return {// 定義websocketwebsocket: null,// 需要回傳的隊(duì)列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", () => {// 訂閱 回傳評(píng)估結(jié)果的主題this.websocket.subscribe("vte/asset/report", (error) => {if (error) {console.log("error:", err);} else {console.log("回傳評(píng)估結(jié)果 sub success");}});});// 連接失敗this.websocket.on("error", (error) => {console.log("連接失敗:", error);});// 接收到服務(wù)器消息時(shí)this.websocket.on("message", (topic, message) => {console.log("websocket message", JSON.parse(message.toString()), topic);// 獲取評(píng)估結(jié)果let assessmentReport = JSON.parse(message.toString());this.todoList.push(assessmentReport);});// 關(guān)閉連接時(shí)this.websocket.on("close", () => {console.log("close");});},methods: {//獲取mqtt連接地址、用戶(hù)名和密碼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ù)同時(shí)需要轉(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);//隊(duì)列里有數(shù)據(jù)再回傳if (newval.length > 0) {console.log("回傳評(píng)估結(jié)果圖片");//獲取轉(zhuǎn)圖像需要的數(shù)據(jù)await this.createImages([newval[0]]);}},},}, }; </script>

三、注意事項(xiàng)

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

/*

感謝chl的指導(dǎo)！

希望對(duì)你有幫助！

如有錯(cuò)誤，歡迎指正！非常感謝！

*/

總結(jié)

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

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