java vue前端预览邮件发送图片前端上传图片到后端vue

转载

编程小匠人 2023-12-16 13:45:26

文章标签 java vue前端预览邮件发送图片 vue.js 前端 javascript 上传 文章分类 Java 后端开发

最近接手一个项目，需要上传对应的奖项，以及佐证材料

也就是。。一个字符串，对应一张图片、需要多组字符串对应多组图片

其实这都好处理，关键就是，图片要如何上传给后端？？

有一说一，光效果我就做了好久，图片效果代码我就不上传了分享了，我这边分享一下相关的测试代码，主要是分享一下如何上传图片给后端的方式

以下是VUE的一个组件，可以直接通过这个组件进行测试，即可成功。

这里强调一下，后端使用的数据传输方式是通过 multiple="multiple" 的方式进行传输的

<template>
    <form id="form1" action="/" method="post" enctype="multipart/form-data" class="input-file">
        <div>
            <input type="text" id="avatval" placeholder="请选择文件···" readonly="readonly" style="vertical-align: middle;"
                value="111" @click="uppic" />
            <!-- <label for="profile_pic" id="avatval">上传</label> -->
            <input multiple="multiple" type="file" id="profile_pic" name="profile_pic" accept=".jpg,.jpeg,.png"
                @change="filechange">
        </div>
        <div>
            <button type="button" id="btn" @click="meg()">提交</button>
        </div>
    </form>
</template>

<script>
import axios from 'axios';
import eventBus from '@/util/eventbus.js'
export default {
    namne: 'mytry',
    methods: {
        meg() {
            console.log(document.getElementById('profile_pic').files)

            let ava = document.getElementById('avatval');

            let pro = document.getElementById('profile_pic')
            console.log(pro.files)
            // console.log(pro.files[0].lastModified)
            ava.innerHTML = pro.files[0].name


            let mydata = new FormData()
            mydata.append('file',pro.files[0])
            axios.post('http://localhost:8081/testApi/test',mydata).then(res=>{
                console.log(res)
            })
        },
        uppic() {
            // 执行 id 为profile_pic 的点击事件方法
            let pro = document.getElementById('profile_pic')
            pro.click();



        },
        filechange() {

            let ava = document.getElementById('avatval');

            let pro = document.getElementById('profile_pic')
            // console.log(pro.files)
            console.log(pro.files[0])
            ava.value = pro.files[0].name
            // console.log(pro.files[0].name)
            // console.log(ava.value)
            eventBus.emit('eventFrom',pro.files[0])

        }
    },
    created(){
        console.log("mytry 组件")
    }
}
</script>

<style>
/* 隐藏原有的样式 */
input[type='file'] {
    border: 0px;
    display: none;
}

.input-file {
    margin: 2px 3px;
}

#avatval {
    padding: 3px 6px;
    padding-left: 10px;
    border: 1px solid #E7EAEC;
    width: 200px;
    height: 25px;
    line-height: 25px;
    border-left: 3px solid #3FB7EB;
    background: #FAFAFB;
    border-radius: 5px;
}
</style>

说一下这边注意的地方吧，

java vue前端预览邮件发送图片前端上传图片到后端vue_javascript