Vue上传图片并实时回显
有注释,等有时间在详细写这篇文章<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>添加图片</title><style>#upload-tip {border: 1px dashed #d9d9d9;width: 135px;
·
有注释,等有时间在详细写这篇文章
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>添加图片</title>
<style>
#upload-tip {
border: 1px dashed #d9d9d9;
width: 135px;
height: 135px;
line-height: 135px;
cursor: pointer;
font-size: 36px;
color: #d9d9d9;
}
#img-show {
width: 135px;
height: 135px;
display: block;
margin: 0 auto;
object-fit: cover;
}
</style>
<script>
function imgfileChange() {
var upload_tip = document.getElementById("upload-tip");
var img_show = document.getElementById("img-show");
var imgfile = document.getElementById("imgfile");
var freader = new FileReader();
//开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
freader.readAsDataURL(imgfile.files[0]);
/* console.log(imgfile.files[0])*/
//处理load事件。该事件在读取操作完成时触发。
freader.onload = function (e) {
// e.target.result; 就是data:image/jpeg;base64,+编码 就相当于直接解码
img_show.src = e.target.result;
/*console.log(e.target.result)*/
img_show.style.display = "inline";
upload_tip.style.display = "none";
};
}
</script>
</head>
<body>
<div id="app">
<div id="wrap">
<div id="content">
<form style="width: 135px;height: 135px;padding-left: 50%;padding-top: 20%">
<label>
<div style="text-align: center">
<div id="upload-tip">+</div>
<img src="" alt="" id="img-show" style="display: none">
<input type="file" id="imgfile" ref="myFile" style="display: none" onchange="imgfileChange()">
</div>
</label>
<button type="button" @click="savePlaceInfo">提 交</button> 
</form>
</div>
</div>
</div>
</body>
</html>
<script src="/js/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
provinces: [],
place: {},
id: "",
},
methods: {
savePlaceInfo() {//保存图片的方法
console.log(this.place);
//查找到存放文件的元素。
//输出 <input type="file" id="imgfile" onchange="imgfileChange()" style="display: none;">
let myFile = this.$refs.myFile;
//type 为 file 的 input 元素内部有一个 files数组,里边存放了所有选择的 file,由于文件上传时,文件可以多选,因此这里拿到的 files 对象是一个数组。
let files = myFile.files;
console.log(files)
//拿到编码之后的图片数据
//从 files对象中,获取自己要上传的文件,由于这里是单选,所以其实就是数组中的第一项。
let file = files[0];
console.log(file)
/* console.log(file)*/
let formData = new FormData();
formData.append("pic", file);
//axios
axios({
method: 'post',
url: 'http://localhost:8080/save',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((res) => {
/* console.log(res.data);*/
});
},
}
})
</script>
/**
* @description:TODO
* @Author MRyan
* @Date 2020/4/17 12:05
* @Version 1.0
*/
@RestController
@CrossOrigin
public class UploadController {
@PostMapping("save")
public String toupload(MultipartFile pic) throws IOException {//pic为vue传递的字段
System.out.println(pic);
String s = Base64Utils.encodeToString(pic.getBytes());
//直接将s存储到数据库中就可以了 数据库字段 mediumtext 排序规则utf8_general_ci
//展示图片base64解码的时候:src data:image/png;base64,后面加上s
return s;
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)