How to upload pictures and display them in Vue3

The principle of uploading pictures in Vue3 is the same as uploading pictures in javascript. Vue has Vue's writing method but the overall remains the same.

Not much to say about the code:

<div id="contens">
        <p id="contens_TEXT" v-html="contens.introduction"></p>
    </div>
    <div id="title_Text">
        <h3>精彩评论</h3>
    </div>
    <div class="ListOfUsers_box" v-for="towText in towTexts" :key="towText">
        <div class="ListOfUsers">
            <img id="ListOfUsers_img" :src="towText.headimg" alt="">
            <div class="ListOfUsers_content">
                <p><b>{
    
    { towText.nickname }}</b></p>
                <p style="margin:0%">{
    
    { towText.content }}</p>
                <div style="display:flex;justify-content: space-around;">
                    <div style="width:60%;display: flex; justify-content: space-between;">
                        <!-- != null?towText.imag:'https://travel.kuxia.top/upload/20220902/b968cc55f9ff6679efd5b45e2dd89d30.jpg' -->
                        <img id="ListOfUsers_content_img" v-for="(towTextImg, index) in towText.image" :key="index"
                            :src="towTextImg" :onerror="errorimg" @click="imgTck(towText.image)" alt="">
                    </div>
                    <div class="but">
                        <van-button type="primary" @click="showt(towText.id, towText.nickname)">回复</van-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 回复 -->
        <div class="comments">
            <div style="display:flex" v-for="commentsImg in towText.item" :key="commentsImg">
                <p><b>{
    
    { commentsImg.nickname }}</b></p>
                <p>{
    
    { commentsImg.content }}</p>
            </div>
        </div>
    </div>
    <van-action-sheet v-model:show="show" title="回复评论">
        <div class="content">
            <textarea name="" id="" cols="30" rows="10" v-model="reply" style="border:none"></textarea>
            <van-button type="primary" @click="clickTOW"
                style="display:flex;justify-content: center;width: 92%;margin-left: 4%;">提交评论</van-button>
        </div>
    </van-action-sheet>

    <!-- 晒照 -->
    <div class="tarbat">
        <div style="display:flex;flex-wrap: wrap; width:14%;margin-left:4%">
            <img v-show="likeS" style="width:30px;height:30px" src="../assets/dianzan.png" @click="giveAlike" alt="">
            <img v-show="like2" style="width:30px;height:30px" src="../assets/dianzan2.png" @click="giveAlikeTow"
                alt="">
            <p style=" margin:0%" @click="giveAlike">点赞</p>
        </div>
        <div style="width: 70%;display: flex;align-items: center;justify-content: center;">
            <van-button type="primary" @click="according"
                style="display:flex;justify-content: center;width: 85%;margin-left: 4%;border-radius : 50px 50px 50px 50px;">我要晒照</van-button>
        </div>
        <van-action-sheet v-model:show="showres" title="晒照">
            <div class="content">
                <textarea name="" id="" cols="30" rows="10" v-model="replyTow"></textarea>
                <van-uploader v-model="fileList" multiple :max-count="3" />
                <van-button type="primary" @click="accordingTow"
                    style="display:flex;justify-content: center;width: 92%;margin-left: 4%;">提交晒照</van-button>
            </div>
        </van-action-sheet>
    </div>
    <!-- 弹出图片 -->
    <van-image-preview v-model:show="showTow" :images="images" @change="onChange">
        <template v-slot:index>第{
    
    { index + 1 }}页</template>
    </van-image-preview>
</template>

<script setup>
import axios from 'axios';
import qs from 'qs';
import { Button } from 'vant';
import { ref } from 'vue'
// import router from '@/router';
import {
    useRouter,
    useRoute
} from "vue-router";
import { createApp } from 'vue';
const router = useRouter();
const route = useRoute();
const contens = ref('');
const userDatas = ref([]);
const towTexts = ref([])
const reply = ref('')
const replyTow = ref('')
const show = ref(false);
const showres = ref(false)
const showTow = ref(false);
var clickTOW;
var datase;
let errorimg = 'this.src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0209%2Fa362b55ej00rprvbv010vd200rs00rsg00hx00hx.jpg&thumbnail=660x2147483647&quality=80&type=jpg"'

datase = () => {
    axios({
        method: "post", //请求方式
        url: "api/science/clockdetail ", //url
        data: qs.stringify({
            // 参数
            // placeid: route.query.id,
            scienceid: route.query.eventid
        }),
    }).then((res) => {
        console.log(res.data); //成功回调
        contens.value = res.data.info
        towTexts.value = res.data.coment
        console.log(towTexts.value);
    })
}
datase()

const images = ref([
    // 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    // 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
]);
const onChange = (newIndex) => {
    index.value = newIndex;
};
const imgTck = (Imgtow) => {
    showTow.value = true
    console.log(Imgtow);
    images.value = Imgtow

}

const index = ref(0);

const showt = (id, nickname) => {
    show.value = true
    clickTOW = () => {
        if (reply.value != '') {
            axios({
                method: "post", //请求方式
                url: "", //url
                data: qs.stringify({
                    // 参数
                   
                }),
            }).then((res) => {
                console.log(res.data); //成功回调
                datase()
            })
            show.value = false;
        }
    }
}

const fileList = ref([]);

const according = () => {
    showres.value = true
}
const accordingTow = () => {
    // 创建数据表单
    var data = new FormData();
    // let imgArrs = []
    for (let index = 0; index < fileList.value.length; index++) {
        let fileOne = fileList.value[index].file;
        data.append('file', fileOne) //这里就要使用我么在上面创建的from.DATA了将图片的数据放进去
        //图片上传
        axios({
            method: "post", //请求方式
            url: "", //url
            data: data // 参数
        }).then((res) => {
            console.log(res.data); //成功回调
            imgArrs.push(res.data.front_file)
            if (imgArrs.length == index + 1) {
                 //图片回显
                axios({
                    method: "post", //请求方式
                    url: "", //url
                    data: qs.stringify({
                        // 参数
               
                    })
                }).then((res) => {
                    console.log(userDatas.value.nickname);
                    console.log(userDatas.value.img);
                    console.log(route.query.eventid);
                    console.log(replyTow.value);
                    console.log(String(imgArrs));
                    console.log(res.data); //成功回调
                    datase()
                })
            }
        })
    }
    console.log(replyTow.value);
    showres.value = false
}
// 点赞
const gicealike = ref(false)
const likeS = ref(true)
const like2 = ref(false)
const giveAlike = () => {
    if (gicealike) {
        likeS.value = false
        like2.value = true
        like()
    }
}
const giveAlikeTow = () => {
    likeS.value = true
    like2.value = false
}

const like = () => {
    axios({
        method: "post", //请求方式
        url: "", //url
        data: qs.stringify({
            // 参数
          
        }),
    }).then((res) => {
        console.log(res.data); //成功回调
        like.value = false
        like2.value = true
    })
}
</script>

<style>
body {
    background-color: rgba(241, 241, 241, 1);
}

.title_tows {
    width: 100%;
    height: 2.5rem;
    background-color: cornflowerblue;
}

.list_tow_list {
    width: 100%;
    /* height: 100ch; */
    margin-top: 1%;
}

#img_imaget {
    position: absolute;
    width: 1.875rem;
    height: 1.875rem;
    top: 1%;
}

.listetows {
    background-color: #fff;
    box-shadow: 0.125rem 0.1875rem;
    width: 94%;
    margin-left: 3%;
    border-radius: 5%;
    margin-top: 2%;
}

#img_images {
    width: 94%;
    height: 8.75rem;
    border-radius: 5%;
    margin-left: 3%;
    margin-top: 2%;
}

.title_tows_text {
    width: 100%;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

#contens {
    width: 94%;
    margin-left: 3%;
    background-color: #fff;
    border-radius: 4%;
}

#contens_TEXT {
    width: 94%;
    margin-left: 3%;
    padding: 1%;
}

#title_Text {
    width: 94%;
    background-color: #fff;
    height: 40px;
    margin: 3%;
    border-radius: 10px 10px 10px 10px;
}

#title_Text h3 {
    width: 96%;
    margin: 0%;
    margin-left: 2%;
    display: flex;
    height: 40px;
    align-items: center;
}

.ListOfUsers_box {
    width: 94%;
    margin: 3%;
    background-color: #fff;
    position: relative;
    border-radius: 10px 10px 10px 10px;
    height: auto;
    padding-bottom: 1%;
}

.ListOfUsers {
    display: flex;
}

#ListOfUsers_img {
    width: 20%;
    height: 20%;
    margin-left: 2%;
    margin-top: 2%;
}

.ListOfUsers_content {
    width: 100%;
    margin-left: 2%;
    height: 30%;
}

#ListOfUsers_content_img {
    width: 30%;
    height: 55px;
}

.comments {
    margin-left: 25%;
    height: auto;
    width: 70%;
    margin-top: 2%;
    margin-bottom: 2%;
    background-color: rgb(241, 241, 241);
    border-radius: 10px 10px 10px 10px;
}

.comments p {
    margin: 0%;
    padding: 5%;
    border-radius: 10%;
}

.but {
    margin-left: -10%;
    margin-top: 5%;
}

.content {
    padding: 16px 16px 60px;
}

.content textarea {
    width: 100%;
    height: 70%;
}

.tarbat {
    width: 100%;
    height: 60px;
    background-color: rgb(249, 249, 249);
    position: fixed;
    bottom: 0%;
    display: flex;
    justify-items: center;
    justify-content: space-around;
}
</style>

The general principle is to use the image upload interface to first obtain the image and convert it into a string. The echo page is very simple, that is, put the path after you upload the image into the created fromdata function. (You just need to put the link in the URL address.) The components used have to be downloaded. Vant 4