前序:因爲只是爲了實現單個功能,頁面很簡單;
上傳完圖片後效果:
代碼實現如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scals=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>上傳圖庫</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="file" id="file">
<button id="btn" @click="clickBtn">上傳</button>
<div style="width: 100%;height: 1px; background-color: #333333"></div>
<div>
<ul>
<li style="list-style: none; background-color: #d2d2d2" v-for="item in images">
<img :src="item" />
</li>
</ul>
</div>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
images:[]//圖片數組
},
methods:{
clickBtn:function(){
var file = $("#file").get(0).files[0];
var formData = new FormData();//*
formData.append("file",file);
var that = this;
axios.post("http://192.168.0.213:8088/upload/picture",formData)
.then(function(response){
var data = response["data"];
var code = data["code"];
var message = data["message"];
var url = data["list"];
if (code == "000000"){
that.images.push(url);
} else{
alert("上傳失敗");
}
})
.catch(function(error){
alert("上傳失敗 " + error);
})
}
}
})
</script>
</html>
