1.主要使用el-ui的upload组件。代码如下，最主要的就是将上传的文件转化为当前的url显示在页面
主要代码如下，基于vue的：
<template><div><el-uploadaccept="image/png,image/gif,image/jpg,image/jpeg"ref="rebateUpload"class="avatar-uploader":limit="1":before-upload="beforeUpload":file-list="fileList":on-change="getLocalImg":on-exceed="uploadExceed":show-file-list="false"action="#"><div class="show_img" v-if="isHidden"><iclass="el-icon-plus"style="color: #d9d9d9; margin-top: 15px"></i><p style="font-size: 14px; color: #d9d9d9">上传照片</p></div><imgclass="show_img"v-if="!isHidden":src="path"width="100%"height="100%"/></el-upload></div></template><script>export default {data () {return {fileList: [],file:'',//传递给后端的文件isHidden:true,path:'',}},methods: {// 获取上传图片的本地url，用于上传前的本地预览getLocalImg(event, fileList) {let url = "";if (window.createObjectURL !== undefined) {url = window.createObjectURL(event.raw);} else if (window.URL !== undefined) {url = window.URL.createObjectURL(event.raw);} else if (window.webkitURL !== undefined) {url = window.webkitURL.createObjectURL(event.raw);}this.path = url;this.isHidden = false;let self = this;//强制刷新，嵌套太深self.$forceUpdate();},beforeUpload(file) {this.file = file;//传给后端的值const promise = new Promise((resolve) => {this.$nextTick(function () {resolve(true);});});return promise;},uploadExceed(files, fileList) {this.$set(fileList[0], "raw", files[0]);this.$set(fileList[0], "name", files[0].name);this.$refs["rebateUpload"].clearFiles(); // 清除文件this.$refs["rebateUpload"].handleStart(files[0]); // 选择文件后的赋值方法},}}</script><style lang="scss" scoped>/deep/ .el-upload__input {display: none;}/deep/.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.show_img {width: 100px;height: 100px;display: flex;flex-direction: column;justify-content: center;justify-items: center;}</style>
带有校验功能的：beforeUpload方法
<template><div><el-uploadaccept="image/png,image/gif,image/jpg,image/jpeg"ref="rebateUpload"class="avatar-uploader":limit="1":before-upload="beforeUpload":file-list="fileList":on-change="getLocalImg":on-exceed="uploadExceed":show-file-list="false"action="#"><div class="show_img" v-if="isHidden"><iclass="el-icon-plus"style="color: #d9d9d9; margin-top: 15px"></i><p style="font-size: 14px; color: #d9d9d9">上传照片</p></div><imgclass="show_img"v-if="!isHidden":src="path"width="100%"height="100%"/></el-upload></div></template><script>export default {data () {return {fileList: [],file:'',//传递给后端的文件isHidden:true,path:'',showPhoto:false}},methods: {// 获取上传图片的本地url，用于上传前的本地预览getLocalImg(event, fileList) {if(this.showPhoto){let url = "";if (window.createObjectURL !== undefined) {url = window.createObjectURL(event.raw);} else if (window.URL !== undefined) {url = window.URL.createObjectURL(event.raw);} else if (window.webkitURL !== undefined) {url = window.webkitURL.createObjectURL(event.raw);}this.path = url;this.isHidden = false;//强制刷新，嵌套太深this.$forceUpdate();this.showPhoto=false}},// 对文件的校验，主要使用一个变量不让其显示出来照片beforeUpload(file) {const isLtSize = file.size / 1024 /1024<1if (!isLtSize) {this.showPhoto=falsethis.$message.warning(`上传图片大小不能超过1MB!`)}else{this.showPhoto=truethis.file=file}},uploadExceed(files, fileList) {this.$set(fileList[0], "raw", files[0]);this.$set(fileList[0], "name", files[0].name);this.$refs["rebateUpload"].clearFiles(); // 清除文件this.$refs["rebateUpload"].handleStart(files[0]); // 选择文件后的赋值方法},}}</script><style lang="scss" scoped>/deep/ .el-upload__input {display: none;}/deep/.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.show_img {width: 100px;height: 100px;display: flex;flex-direction: column;justify-content: center;justify-items: center;}</style>
补充：图片上传通过formData上传，下面代码，formData作为参数传到后端
let formData = new FormData();formData.append("file", this.file);
