1.主要使用el-ui的upload组件。代码如下,最主要的就是将上传的文件转化为当前的url显示在页面
主要代码如下,基于vue的:
<template>
<div>
<el-upload
accept="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">
<i
class="el-icon-plus"
style="color: #d9d9d9; margin-top: 15px"
></i>
<p style="font-size: 14px; color: #d9d9d9">上传照片</p>
</div>
<img
class="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-upload
accept="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">
<i
class="el-icon-plus"
style="color: #d9d9d9; margin-top: 15px"
></i>
<p style="font-size: 14px; color: #d9d9d9">上传照片</p>
</div>
<img
class="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<1
if (!isLtSize) {
this.showPhoto=false
this.$message.warning(`上传图片大小不能超过1MB!`)
}else{
this.showPhoto=true
this.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);