一、創建普通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>
</head>
<body>
</body>
</html>
二、編寫文件選擇及圖片顯示功能
<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/star/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>
五、后端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/");
}
}
七、選擇圖片上傳可以看到上傳成功並可以正常顯示了
