feat(接口测试): 支持返回数据类型为图片格式的接口测试，增加图片展示

--story=1013006 --user=王孝刚 github#26624 支持返回数据类型为图片格式的接口测试
https://www.tapd.cn/55049933/s/1422624

api-test/frontend/src/business/definition/components/response/ResponseResult.vue

@@ -2,15 +2,22 @@
   <div class="text-container" v-if="responseResult">
     <el-tabs v-model="activeName" v-show="isActive">
       <el-tab-pane :label="$t('api_test.definition.request.response_body')" name="body" class="pane">
-        <ms-sql-result-table v-if="isSqlType && activeName === 'body'" :body="responseResult.body" />
+        <ms-sql-result-table v-if="isSqlType && activeName === 'body' && !responseResult.contentType"
+                             :body="responseResult.body"/>
         <ms-code-edit
-          v-if="!isSqlType && isMsCodeEditShow && activeName === 'body'"
+          v-if="!isSqlType && isMsCodeEditShow && activeName === 'body' && !isPicture"
           :mode="mode"
           :read-only="true"
           :modes="modes"
           :data.sync="responseResult.body"
           height="250px"
-          ref="codeEdit" />
+          ref="codeEdit"/>
+        <el-row v-if="isPicture && activeName === 'body'">
+          <el-col :span="24">
+            <el-image :src="srcUrl" fit="contain" style="width: 100%;height: 100%;"></el-image>
+          </el-col>
+        </el-row>
+
       </el-tab-pane>
 
       <el-tab-pane :label="$t('api_test.definition.request.response_header')" name="headers" class="pane">
@@ -19,7 +26,7 @@
           :read-only="true"
           :data.sync="responseResult.headers"
           ref="codeEdit"
-          v-if="activeName === 'headers'" />
+          v-if="activeName === 'headers'"/>
       </el-tab-pane>
 
       <el-tab-pane v-if="isTestPlan" :label="$t('api_test.definition.request.console')" name="console" class="pane">
@@ -29,7 +36,7 @@
           :data.sync="responseResult.console"
           ref="codeEdit"
           v-if="activeName === 'console'"
-          height="calc(100vh - 300px)" />
+          height="calc(100vh - 300px)"/>
       </el-tab-pane>
 
       <el-tab-pane v-if="!isTestPlan" :label="$t('api_test.definition.request.console')" name="console" class="pane">
@@ -38,11 +45,11 @@
           :read-only="true"
           :data.sync="responseResult.console"
           ref="codeEdit"
-          v-if="activeName === 'console'" />
+          v-if="activeName === 'console'"/>
       </el-tab-pane>
 
       <el-tab-pane :label="$t('api_report.assertions')" name="assertions" class="pane assertions">
-        <ms-assertion-results :assertions="responseResult.assertions" v-if="activeName === 'assertions'" />
+        <ms-assertion-results :assertions="responseResult.assertions" v-if="activeName === 'assertions'"/>
       </el-tab-pane>
 
       <el-tab-pane :label="$t('api_test.request.extract.label')" name="label" class="pane">
@@ -51,7 +58,7 @@
           :read-only="true"
           :data.sync="responseResult.vars"
           v-if="activeName === 'label'"
-          ref="codeEdit" />
+          ref="codeEdit"/>
       </el-tab-pane>
 
       <el-tab-pane :label="$t('api_report.request_body')" name="request_body" class="pane">
@@ -60,7 +67,7 @@
           :read-only="true"
           :data.sync="reqMessages"
           v-if="activeName === 'request_body'"
-          ref="codeEdit" />
+          ref="codeEdit"/>
       </el-tab-pane>
 
       <el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane cookie">
@@ -69,8 +76,8 @@
             v-if="currentProtocol === 'SQL'"
             :commands="sqlModes"
             :default-command="mode"
-            @command="sqlModeChange" />
-          <ms-dropdown v-else :commands="modes" :default-command="mode" @command="modeChange" ref="modeDropdown" />
+            @command="sqlModeChange"/>
+          <ms-dropdown v-else :commands="modes" :default-command="mode" @command="modeChange" ref="modeDropdown"/>
         </template>
       </el-tab-pane>
     </el-tabs>
@@ -81,8 +88,9 @@
 import MsAssertionResults from './AssertionResults';
 import MsCodeEdit from '../MsCodeEdit';
 import MsDropdown from '../../../../business/commons/MsDropdown';
-import { BODY_FORMAT } from '../../model/ApiTestModel';
+import {BODY_FORMAT} from '../../model/ApiTestModel';
 import MsSqlResultTable from './SqlResultTable';
+import {downloadByURL} from "fit2cloud-ui/src/tools/utils";
 
 export default {
   name: 'MsResponseResult',
@@ -114,12 +122,15 @@ export default {
       mode: BODY_FORMAT.TEXT,
       isMsCodeEditShow: true,
       reqMessages: '',
+      contentType: ['image/png', 'image/jpeg', 'image/gif', 'image/bmp', 'image/webp', 'image/svg+xml', 'image/apng', 'image/avif'],
+      srcUrl: '',
     };
   },
   watch: {
     response() {
       this.setBodyType();
       this.setReqMessage();
+      this.showPicture();
     },
     activeName: {
       handler() {
@@ -143,6 +154,12 @@ export default {
     sqlModeChange(mode) {
       this.mode = mode;
     },
+    showPicture() {
+      if (this.responseResult.contentType && this.contentType.includes(this.responseResult.contentType)) {
+        this.modes.push('picture')
+        this.srcUrl = 'data:' + this.responseResult.contentType + ';base64,' + this.responseResult.imageUrl;
+      }
+    },
     setBodyType() {
       if (
         this.response &&
@@ -206,6 +223,7 @@ export default {
   mounted() {
     this.setBodyType();
     this.setReqMessage();
+    this.showPicture();
   },
   computed: {
     isSqlType() {
@@ -220,6 +238,9 @@ export default {
     responseResult() {
       return this.response && this.response.responseResult ? this.response.responseResult : {};
     },
+    isPicture() {
+      return this.responseResult.contentType && this.contentType.includes(this.responseResult.contentType) && this.mode === 'picture';
+    },
   },
 };
 </script>

framework/sdk-parent/jmeter/src/main/java/io/metersphere/dto/ResponseResult.java

@@ -27,6 +27,10 @@ public class ResponseResult {
 
     private String console;
 
+    private String contentType;
+
+    private byte[] imageUrl;
+
     private final List<ResponseAssertionResult> assertions = new ArrayList<>();
 
 }

framework/sdk-parent/jmeter/src/main/java/io/metersphere/jmeter/JMeterBase.java

@@ -19,10 +19,7 @@ import org.apache.jmeter.visualizers.backend.BackendListener;
 import org.apache.jorphan.collections.HashTree;
 
 import java.lang.reflect.Field;
-import java.util.ArrayList;
-import java.util.LinkedList;
-import java.util.List;
-import java.util.Map;
+import java.util.*;
 
 public class JMeterBase {
     private final static String THREAD_SPLIT = " ";
@@ -30,6 +27,8 @@ public class JMeterBase {
     private final static String SPLIT_EQ = "split==";
     private final static String SPLIT_AND = "split&&";
 
+    private static final List<String> imageList = Arrays.asList("image/png", "image/jpeg", "image/gif", "image/bmp", "image/webp", "image/svg+xml", "image/apng", "image/avif");
+
     public static HashTree getHashTree(Object scriptWrapper) throws Exception {
         Field field = scriptWrapper.getClass().getDeclaredField("testPlan");
         field.setAccessible(true);
@@ -105,6 +104,11 @@ public class JMeterBase {
                 && result.getResponseDataAsString().length() > size) {
             requestResult.setBody("");
         } else {
+            //判断返回的类型是否是图片
+            if (StringUtils.isNotEmpty(result.getContentType()) && imageList.contains(result.getContentType())) {
+                responseResult.setContentType(result.getContentType());
+                responseResult.setImageUrl(result.getResponseData());
+           }
             responseResult.setBody(result.getResponseDataAsString());
         }
         responseResult.setHeaders(result.getResponseHeaders());