前端实现文件的上传和下载

limmlzc
于 2023-11-24 21:20:16 发布
阅读量37
点赞数
文章标签：前端
本文链接：https://blog.csdn.net/2201_75886962/article/details/134607217
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            background-color: aquamarine;
            width: 20%;
            height: 100%;
            /* height: 8vmin; */
            /* margin: 10vmin auto; */
        }

        li {
            line-height: 25vmin;
            text-align: center;
            /* display: inline-block; */
            list-style-type: none; /* 去掉无序列表的小黑点 */
            /* width: 20%; */
        }

        li:hover {
            background-color: orangered;
        }

        .color {
            background-color: red;
        }
        .item{
            /* font-family: "华文新魏"; */
            font-size: 4em;
            font-family: "华文行楷"
        }
        .a {
            font-family: 'Courier New', Courier, monospace;
            font-size: 20px;
            /* vertical-align: middle; */
        }
        .small{
            font-family: "华文行楷";
            font-size: 4em;
        }
        .main {
            width: 80%;
        }
        .main div{
            text-align: center;
            height: 100px;
            margin: 0 auto;
        }
        .mains {
            display: flex;
            justify-content:space-between;
        }
        #uploadContainer {
            margin: 30px auto;
            height: 200px;
            width: 200px;
            border: solid 1px #aaa;
            box-shadow: 0 0 5px #aaa;
            border-radius: 20px;
            line-height: 200px;
            position: relative;
        }
        #uploadContainer #upload {
            height: 200px;
            width: 200px;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="mains">
        <ul>
            <li class="color">企业简介</li>
            <li>企业动态</li>
            <li>产品展示</li>
            <li>成功案例</li>
            <li>行业资讯</li>
        </ul>
        <div class="main" id="app-4">
            <div class="item" style="display: block;">
                鲜衣怒马少年郎，对镜自怜夜不眠
                <table class="table">
                    <thead>
                      <tr>
                        <th scope="col" v-for="(item,key,index) in liZhicheng[0]" :key="index">{{key}}</th>
                      </tr>
                    </thead>
                    <tbody class="a">
                      <tr v-for="(item,key,index) in liZhicheng" :key="index">
                        <th v-for="(item,key,index) in item" :key="index">
                            <template v-if="key == 'image'">
                                <img :src="item" alt="Image" width="50px" height="50px">
                              </template>
                              <template v-else>
                                {{ item }}
                              </template>
                        </th>
                      </tr>
                    </tbody>
                  </table>
            </div>
            <div class="item" style="display: none;">
                我与春风携过客，你携秋水揽星河
                <!-- 我这里写个简单的样式 -->
                <div id="uploadContainer" >
                    <!-- 第一阶段  -->
                    <small id="uploadText">上传头像</small>
                    <input type="file" id="upload" onchange="fileChange(event)">
                    <img src="" alt="存储用户头像" style="display: none;" id="img">
                </div>
            </div>
            <div class="item" style="display: none;">
                远赴人间惊鸿宴，一睹人间盛世颜
            </div>
            <div class="item" style="display: none;">
                少年曾许凌云志，取得人间第一流
            </div>
            <div class="item" style="display: none;">
                别人笑我太疯颠，我笑他人看不穿
            </div>
        </div>
    </div>
    <div>
    </div>
</body>

</html>
<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ],
            liZhicheng: 'sdvgvdg'
        },
        mounted() {
            axios.get('http://localhost:8080/student/page', {
            params: {
                page: 1,
                pageSize: 2
            }
        }).then((result) => {
            console.log(result.data)
            this.liZhicheng = result.data.data.records;
            var a = Object.keys(this.liZhicheng);
            console.log(a);
            console.log(this.liZhicheng[0]);
        })
        }
    })
    var lis = document.querySelectorAll('li')
        var items = document.querySelectorAll('.item')
        for (i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i)
            lis[i].onclick = function () {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = ''
                }
                this.className = 'color'
                var index = this.getAttribute('index')
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none'
                }
                items[index].style.display = 'block'
            }
        }
        function fileChange(e){
            let file = e.target.files[0];
            let param = new FormData(); //创建form对象
            param.append('file',file);//通过append向form对象添加数据
            console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
            let config = {
              headers:{'Content-Type':'multipart/form-data'} //这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
            }; //添加请求头
            axios.post('http://localhost:8080/commons/upload',param,config)
              .then(response=>{
                console.log(response.data);
                console.log("csfvs");
                var img = document.querySelector("#img")
                img.src = "http://localhost:8080/commons/download?name=" + response.data.data
                img.style.display='block'
            })
        };
</script>
<script src="./a.js"></script>