實(shí)現(xiàn)藍(lán)墨云

建立一級(jí)路由vue-router-demo1
一個(gè)vue的單頁應(yīng)用（一級(jí)路由）的腳手架程序構(gòu)建
1.進(jìn)入某個(gè)目錄如D：\VueStudy
2.通過命令創(chuàng)建項(xiàng)目：vue init webpack vue-router-demol(后幾項(xiàng)都選N)
3.cd進(jìn)入vue-router-demo1目錄
4.安裝依賴：npm install
5.運(yùn)行:npm run dev
6.更改config目錄下的index。js文件，將端口改成80ctr+c退出命令

13.png

package.json相當(dāng)也pom.xml

APP.vue

<template>
<div id="app">
<div class="header">
<router-link to="/">
<img src="./assets/logo.png" class="logo"/>
</router-link>
<router-link to="/task" class="nav-item">任務(wù)中心</router-link>
<router-link to="/lib" class="nav-item">庫管理</router-link>
<router-link to="/ucenter" class="nav-item">張麗</router-link>
</div>
<div class="container"><router-view></router-view></div>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
<style>

app {

background-color: rgb(244, 244, 244);
}
.header {
display: flex;
height: 80px;
background-color: #fff;
font-size: 20px;
padding-left: 120px;
align-items: center;
}
.nav-item {
width: 100px;
margin-right: 20px;
}
.logo{
widows: 100px;
height: 35px;
margin-right: 200px;
}
.container {
width: 85%;
margin: 0 auto;
padding-bottom: 40px;
}
a {
text-decoration: none;
color: #aaa;
}
a:hover {
color: rgb(2,165,218);
}
</style>```

index.js類

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
// 去除#的hash模式
mode: "history",
routes: [
{
//我的班課
path: '/',
name: 'Index',
component: resolve => require(['../components/Index.vue'], resolve)
},
{
//任務(wù)中心
path: '/task',
name: 'Task',
component: resolve => require(['../components/Task.vue'], resolve)
},
{
//庫管理
path: '/lib',
name: 'Lib',
component: resolve => require(['../components/Lib.vue'], resolve)
},
{
//個(gè)人中心
path: '/ucenter',
name: 'UCenter',
component: resolve => require(['../components/UCenter.vue'], resolve)

    },
    {
        //新建班課
        path: '/new_course',
        name: 'NewCourse',
        component: resolve => require(['../components/NewCourse.vue'], resolve)
    },
    {
        //班課詳情
        path: '/course/:id',
        name: 'CourseDetail',
        component: resolve => require(['../components/CourseDetail.vue'], resolve)
    }
]

})

代碼地址：https://github.com/zl0502/VueStudy/tree/master/vue-router-demo1

在spring-boot-mybatis的基礎(chǔ)上添加一個(gè)UploadController類

package com.springboot.mybatis.controller;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;
/**

  • 上傳文件控制器
  • 直接上傳到服務(wù)器
    */

@RestController
public class UploadController {
//指定一個(gè)臨時(shí)路徑作為上傳目錄
//private static String UPLOAD_FOLDER = "D:/temp/";
//遇到http://localhost:8080，則跳轉(zhuǎn)至upload.html頁面
@GetMapping("/")
public String index() {
return "upload";
}
@PostMapping("upload")
public String fileUpload(@RequestParam("file")MultipartFile srcFile, RedirectAttributes redirectAttributes) {
String returnFileName="";
//前端沒有選擇文件，srcFile為空
if (srcFile.isEmpty()) {
redirectAttributes.addFlashAttribute("message", "請(qǐng)選擇一個(gè)文件");
// return "redirect:upload_status";
}
//選擇了文件，開始上傳操作
try {
//構(gòu)建上傳目標(biāo)路徑，找到了項(xiàng)目的target的classes目錄
File destFile = new File(ResourceUtils.getURL("classpath:").getPath());
if (!destFile.exists()) {
destFile = new File("");
}
//輸出目標(biāo)文件的絕對(duì)路徑
System.out.println("file path:" + destFile.getAbsolutePath());
//拼接子路徑
SimpleDateFormat sf_ = new SimpleDateFormat("yyyyMMdd");
String times = sf_.format(new Date());
File upload = new File(destFile.getAbsolutePath(), "upload/" + times);
//若目標(biāo)文件夾不存在，則創(chuàng)建
if (!upload.exists()) {
upload.mkdirs();
}
System.out.println("完整的上傳路徑：" + upload.getAbsolutePath() + "/" + srcFile);
//根據(jù)srcFile大小，準(zhǔn)備一個(gè)字節(jié)數(shù)組
byte[] bytes = srcFile.getBytes();
//拼接上傳路徑
//Path path = Paths.get(UPLOAD_FOLDER + srcFile.getOriginalFilename());
String uuid = UUID.randomUUID().toString().replaceAll("-", "");
// 獲得文件原始名稱
String fileName = srcFile.getOriginalFilename();
// 獲得文件后綴名稱
String suffixName = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
// 生成最新的uuid文件名稱
String newFileName = uuid + "." + suffixName;
//通過項(xiàng)目路徑，拼接上傳路徑
Path path = Paths.get(upload.getAbsolutePath() + "/" + newFileName);
//** 開始將源文件寫入目標(biāo)地址
Files.write(path, bytes);
redirectAttributes.addFlashAttribute("message", "文件上傳成功" + newFileName);
returnFileName="http://localhost:8080/upload/"+newFileName;
} catch (IOException e) {
e.printStackTrace();
}
return returnFileName;
}
//匹配upload_status頁面
@GetMapping("upload_status")
public String uploadStatusPage() {
return "upload_status";
}
}

Task類

<template>
<div class="container">
<h2>任務(wù)中心</h2>
<div class="preview">
<img :src="imgUrl" />
</div>
<form>
<div class="upload">

<input type="file" @change="getFile(event)"/> </div> <br /> <button @click="submit(event)" class="sub-btn">提交</button>
</form>
</div>
</template>
<script>
export default {
name: 'Task',
data() {
return {
imgUrl:'https://static-cdn-oss.mosoteach.cn/mssvc/icons/icon_cc_cover1@2x.png',
file:''
};
},
methods:{
// 圖片預(yù)覽
getFile:function(event){
this.file=event.target.files[0];
var windowURL=window.URL||window.webkitURL;
alert(windowURL.createObjectURL(this.file));
this.imgUrl=windowURL.createObjectURL(this.file);
},
submit:function(event){
// 阻止元素發(fā)生默認(rèn)的行為
event.preventDefault();
let formDate=new FormData();
formDate.append('file',this.file);
this.$http.post('http://localhost:8080/upload',formDate).then(function(response){
alert(response.data);
this.imgUrl=response.data;
});
}
}
};
</script>
<style scoped>

.preview{
    width:300px;
    height: 300px;
}
.preview img{
    width: 100%;
    height: 100%;
}
.sub-btn{
    width: 120px;
    height: 35px;
    border-radius: 20px;
    outline: none;
    background-color: #FFE4C4;
    color: #FFFFFF;
    position: relative;
    top: 20px;
}
.upload{
    margin-top: 10px;
    display: inline-block;
    width: 120px;
    height: 35px;
    border: 1px solid #00BBDD;
    border-radius: 4px;
    /* background-color: #42B983; */
    color: #000;
    text-align: center;
    cursor: pointer;
}
.upload input{
    width: 100%;
    height: 100%;
    /* 透明度 */
    opacity: 0;
}
.upload:hover{
    background: #aadffd;
    border-color: bisque;
    color: coral;
    text-decoration: none;
}

</style>

運(yùn)行的結(jié)果是：實(shí)現(xiàn)圖片的預(yù)覽

22.png

可以換圖片，但是只能預(yù)覽，沒有上傳到數(shù)據(jù)庫

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 文件上傳方式：1.直接上傳到應(yīng)用服務(wù)器（速度，容量） 2.上傳到oss(內(nèi)容存儲(chǔ)服務(wù)器)（阿里云，七牛云）3.前端...
    六年的承諾閱讀 1,848評(píng)論 0贊 4
  • 本文包括：1、文件上傳概述2、利用 Commons-fileupload 組件實(shí)現(xiàn)文件上傳3、核心API——Dis...
    廖少少閱讀 12,742評(píng)論 5贊 91
  • SpringMVC 中，文件的上傳，是通過 MultipartResolver 實(shí)現(xiàn)的。 所以，如果要實(shí)現(xiàn)文件的上...
    fad2aa506f5e閱讀 955評(píng)論 0贊 0
  • 你可曾想到花布、底片.老相機(jī)是兩個(gè)男孩和一個(gè)老人的名字?可曾想到他們之間發(fā)生了什么神奇的故事?一段往事、一...
    QiuYao閱讀 1,439評(píng)論 0贊 2
  • 我向往的我，健康，陽光，積極生活。獨(dú)立，自信，有自己的信念。 能與孤獨(dú)好好相處，能打理好一個(gè)人的生活。 愛健身，愛...
    宛悅會(huì)畫畫閱讀 327評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容