普通靜態HTML中整合VUE並且實現圖片上傳功能使得本地圖片變成線上訪問
阿新 • • 發佈：2021-09-04
一、建立普通HTML網頁檔案，引入vue.js和axios.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>file upload</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
二、編寫檔案選擇及圖片顯示功能
<div id="app">
<img :src="this.picSrc" width="400" height="300"><br/>
<input type="file" ref="inputer"/><br/>
<input type="button" value="上傳" @click="uploadFile()"/><br/>
</div> 三、向後端發出上傳請求，上傳成功後得到該圖片的線上地址（可以直接將此地址複製到瀏覽器線上檢視圖片）
<script> Vue.prototype.$axios = axios; var vm = new Vue({ el: '#app', data: { picSrc:'', filem:'', }, methods: {// 點選事件 uploadFile() { //獲取使用者選擇的檔案 let inputDOM = this.$refs.inputer; this.filem = inputDOM.files[0]; // 向後臺傳遞資料: var formData = new FormData(); // 向formData中新增資料: formData.append("file",this.filem); this.$axios({ method: "post", url: "http://localhost:8888/shopping-content/uploadFile",//不要忘了修改自己的後端地址//我後端使用Springcloud並且配置Zuul閘道器做了跨域處理，如果你遇到跨域問題請自行處理 data: formData, headers:{'Content-Type':undefined} }) .then(successResponse => { this.picSrc = successResponse.data.message; }) } } }); </script>
四、前端頁面完整程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>file upload</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<img :src="this.picSrc" width="400" height="300"><br/>
<input type="file" ref="inputer"/><br/>
<input type="button" value="上傳" @click="uploadFile()"/><br/>
</div>
<script>
Vue.prototype.$axios = axios;
var vm = new Vue({
el: '#app',
data: {
picSrc:'',
filem:'',
},
methods: {
// 點選事件
uploadFile() {
//獲取使用者選擇的檔案
let inputDOM = this.$refs.inputer;
this.filem = inputDOM.files[0];
// 向後臺傳遞資料:
var formData = new FormData();
// 向formData中新增資料:
formData.append("file",this.filem);
this.$axios({
method: "post",
url: "http://localhost:8888/shopping-content/uploadFile",
data: formData,
headers:{'Content-Type':undefined}
})
.then(successResponse => {
this.picSrc = successResponse.data.message;
})
}
}
});
</script>
</body>
</html>
file.html
五、後端Controller實現
@RequestMapping("/uploadFile")
public Result uploadFile(MultipartFile file){
try {
//設定虛擬的對映路徑 --檔案上傳後放到哪裡去--可以是伺服器盤--這裡先放到D盤
String path="D:/file";
//返回一個路徑，使用者訪問此路徑得到該圖片
String url = "";
if (file!=null && file.getSize()>0) {
//上傳後的儲存
file.transferTo(new File(path, file.getOriginalFilename()));
//字首部分與MvcWebConfig中設定的對映路徑保持一致/upload/**
//http://localhost:8081為後端專案的地址，為服務的提供者
url = "http://localhost:8081/upload/"+file.getOriginalFilename();
}
return new Result(true, url);
} catch (IOException e) {
e.printStackTrace();
return new Result(false, "上傳失敗");
}
}
六、經過上述步驟後已經將檔案上傳到了你指定的地方，並且返回此檔案的地址，按道理來說訪問此路徑會看到圖片，但是呢.....能訪問到才怪，檔案路徑中的/upload是哪來的？這需要做個對映，編寫工具類，放在utils包下或config包下或其他包下
都行，記得加註解@Configuration和保持兩個路徑的一致
package com.star.utils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @Configuration public class MvcWebConfig extends WebMvcConfigurerAdapter { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { //addResourceHandler表示對映路徑--與步驟五中的URL的http://localhost:8081後的部分保持一致
//addResourceLocations表示物理路徑 --與伺服器將你上傳的檔案存放的地方的路徑保持一致，即步驟五中的path路徑
registry.addResourceHandler("/upload/**").addResourceLocations("file:D:/file/");
}
}
七、選擇圖片上傳可以看到上傳成功並可以正常顯示了