开发者社区 开发与运维 文章 正文

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

2023-10-23 301
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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

文章标签：
JavaScript
前端开发
关键词：
上传图片VUE.js
bug丶小狼人
目录
相关文章
武林风的雨
|
16天前
vue3学习（3）
vue3学习（3）
武林风的雨
35 1
Star时光
|
13天前
|
JavaScript API
Vue3中的计算属性能否动态修改
【9月更文挑战第5天】Vue3中的计算属性能否动态修改
Star时光
45 10
德国都芳最好
|
6天前
|
JavaScript
Vue3中路由跳转的语法
Vue3中路由跳转的语法
德国都芳最好
109 58
德国都芳最好
|
8天前
|
前端开发
vue3+ts项目中使用mockjs
vue3+ts项目中使用mockjs
德国都芳最好
205 58
源码星辰
|
4天前
|
JavaScript 索引
Vue 2和Vue 3的区别以及实现原理
Vue 2 的响应式系统通过Object.defineProperty来实现，它为对象的每个属性添加 getter 和 setter，以便追踪依赖并响应数据变化。
源码星辰
20 9
小王老师呀
|
6天前
|
JavaScript 开发工具
vite如何打包vue3插件为JSSDK
【9月更文挑战第10天】以下是使用 Vite 打包 Vue 3 插件为 JS SDK 的步骤：首先通过 `npm init vite-plugin-sdk --template vue` 创建 Vue 3 项目并进入项目目录 `cd vite-plugin-sdk`。接着，在 `src` 目录下创建插件文件（如 `myPlugin.js`），并在 `main.js` 中引入和使用该插件。然后，修改 `vite.config.js` 文件以配置打包选项。最后，运行 `npm run build` 进行打包，生成的 `my-plugin-sdk.js` 即为 JS SDK，可在其他项目中引入使用。
小王老师呀
16 6
你真的不认识我了
|
7天前
|
JavaScript 开发者
彻底搞懂 Vue3 中 watch 和 watchEffect是用法
彻底搞懂 Vue3 中 watch 和 watchEffect是用法
你真的不认识我了
23 6
Star时光
|
13天前
|
JavaScript API
如何使用Vue3的可计算属性
【9月更文挑战第5天】如何使用Vue3的可计算属性
Star时光
44 13
那年春天
|
4天前
|
JavaScript 调度
Vue3 使用 Event Bus
Vue3 使用 Event Bus
那年春天
10 1
你都不懂
|
4天前
|
JavaScript
Vue3 : ref 与 reactive
Vue3 : ref 与 reactive
你都不懂
9 1