圖片流轉(zhuǎn)blob或者base64

AppTest.vue

<template>
<img :src="imageData" alt="Image"></img>
</template>

<script >
import axios from 'axios';

export default {
  data() {
    return {
      imageData: null
    };
  },
  created() {
    axios({
    url: '/dev-api/api/AddTask',
    method: 'POST',
    responseType: 'arraybuffer',
    })
    .then((res) => {
        // 方法1
        // const byteArray = new Uint8Array(response.data);
        // const binaryString = byteArray.reduce((data, byte) => {
        // return data + String.fromCharCode(byte);
        // }, '');
        // const base64String = btoa(binaryString);
        // console.warn(binaryString);
        // this.imageData = 'data:image/jpeg;base64,' + base64String;
        // console.warn(this.imageData);
        // 方法2
        let blob = new Blob([res.data],{type: "image/png"});
        let url = window.URL.createObjectURL(blob);
        this.imageData = url;
    })
    .catch((error) => {
        console.error(error);
    });
  }
  
}
</script>

<style scoped>
.read-the-docs {
color: #888;
}
</style>

MockServerClientTest

import org.mockserver.client.MockServerClient;
import org.mockserver.integration.ClientAndServer;
import org.mockserver.model.MediaType;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.nio.charset.StandardCharsets;
import java.nio.file.Files;
import java.nio.file.Paths;

import static jdk.nashorn.internal.runtime.regexp.joni.Config.log;
import static org.mockserver.integration.ClientAndServer.startClientAndServer;
import static org.mockserver.model.HttpRequest.request;
import static org.mockserver.model.HttpResponse.response;

/**
 * @author chenghui
 * @date 2024/3/7 14:09
 */
public class MockServerClientTest {
    private static final Logger log = LoggerFactory.getLogger(MockServerClientTest.class);
    public static void main(String[] args) throws IOException {
        ClientAndServer mockServer = startClientAndServer(1080);
        String fileName = "D:\\work\\code\\vitepress\\docs\\public\\id_rsa.png";
        byte[] bytes = Files.readAllBytes(Paths.get(fileName));
        mockServer
                .when(
                        request()
                                .withMethod("POST")
                                .withPath("/api/AddTask")
                )
                .respond(
                        response()
                                .withStatusCode(200)
                                .withCookie(
                                        "sessionId", "2By8LOhBmaW5nZXJwcmludCIlMDAzMW"
                                )
                                .withBody(bytes)
                                .withContentType(MediaType.PNG)


                );
    }
}

pom.xml

        <dependency>
            <groupId>org.mock-server</groupId>
            <artifactId>mockserver-netty-no-dependencies</artifactId>
            <version>5.14.0</version>
            <scope>test</scope>
        </dependency>

效果

image.png