普通静态HTML中集成VUE并且实现图片上传功能使得本地图片变成在线访问
一、创建普通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/");
}
}
七、选择图片上传可以看到上传成功并可以正常显示了
