Vue3里如何上传图片以及图片回显

Vue3里的上传图片跟javascript的上传图片的原理都是一样的，Vue有Vue的写法但总体不变。

话不多说上代码:

<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>

大致原理就是使用图片上传的接口先将图图片获取到将其转化为字符串, 回显的话页很简单就是将你上传图片后的路径在放到创建的fromdata函数里。(各位只需要将链接放到URL地址里就可以了)用到的组件还得请各位去下载喽Vant 4