一，只允许上传一张，显示图片,以表单形式提交；
1 <el-upload class="avatar-uploader showUploader"
2 ref="businessLicense"
3 action
4 :auto-upload="false"
5 :on-preview="handlePreview"
6 :on-remove="handleRemove"
7 :before-remove="beforeRemove"
8 :on-change="uploadSectionFile"
9 :limit="1">
10 <img v-if="photo" :src="photo" class="avatar">
11 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
12 </el-upload>
13
14
15 data(){
16 return{
17 files: {},
18 photo: '',
19 photoObj: '',
20 }
21 }
22
23 handlePreview(file) {
24 console.log(file);
25 },
26 beforeRemove(file, fileList) {
27 return this.$confirm(`确定移除 ${ file.name }？`);
28 },
29 uploadSectionFile(file){
30 const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
31 const isJPG = typeArr.indexOf(file.raw.type) !== -1;
32 const isLt3M = file.size / 1024 / 1024 < 3;
33 if (!isJPG) {
34 this.$message.error('只能是图片!');
35 this.$refs.upload.clearFiles();
36 this.files = null;
37 return;
38 }
39 if (!isLt3M) {
40 this.$message.error('上传图片大小不能超过 3MB!');
41 this.$refs.upload.clearFiles();
42 this.files = null;
43 return;
44 }
45 this.files = file.raw;
46 // FormData 对象
47 var formData = new FormData();
48 // 文件对象
49 formData.append('file', this.files);
50 let config = {
51 headers: {
52 'Content-Type': 'multipart/form-data'
53 },
54 methods: 'post'
55 }
56 this.axios.post("**************",formData,config).then(res=>{
57 if(res.data.flag == 'S'){
58 this.photoObj = res.data.data.objectId
59 this.photo = res.data.data.url
60 }else{
61 this.$message.error(res.data.message)
62 }
63 })
64 },
65
66
67 .avatar-uploader /deep/ .el-upload {
68 border: 1px dashed #d9d9d9;
69 border-radius: 6px;
70 background-color: #fff;
71 cursor: pointer;
72 position: relative;
73 overflow: hidden;
74 width: 180px;
75 height: 180px;
76 }
77 .avatar-uploader .el-upload:hover {
78 border-color: #409EFF;
79 }
80 .avatar-uploader-icon {
81 font-size: 28px;
82 color: #8c939d;
83 width: 178px;
84 height: 178px;
85 line-height: 178px;
86 text-align: center;
87 }
88 .showUploader /deep/ .el-upload-list{
89 display: none;
90 }
91 .avatar {
92 width: 178px;
93 height: 178px;
94 display: block;
95 }
二，上传多张图片，展示图片，以表单形式提交；fileList即为多张图片集合，后台反显时也只需赋值给fileList;
<el-upload class="avatar-uploader"
ref="otherLicense"
action
:auto-upload="false"
:on-preview="handlePicPreview"
:on-remove="handleRemove"
:file-list="fileList"
:on-change="otherSectionFile"
list-type="picture-card"
multiple>
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" class="avatar">
</el-dialog>
data(){
return{
fileList: {},
dialogVisible: false,
dialogImageUrl: ''
}
}
handlePicPreview(file){
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleRemove(file, fileList) {
this.fileList.map((item,index)=>{
if(item.uid==file.uid){
this.fileList.splice(index,1)
}
})
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
otherSectionFile(file){
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
const isJPG = typeArr.indexOf(file.raw.type) !== -1;
const isLt3M = file.size / 1024 / 1024 < 3;
if (!isJPG) {
this.$message.error('只能是图片!');
this.$refs.upload.clearFiles();
this.otherFiles = null;
return;
}
if (!isLt3M) {
this.$message.error('上传图片大小不能超过 3MB!');
this.$refs.upload.clearFiles();
this.otherFiles = null;
return;
}
this.otherFiles = file.raw;
// FormData 对象
var formData = new FormData();
// 文件对象
formData.append('file', this.otherFiles);
let config = {
headers: {
'Content-Type': 'multipart/form-data'
},
methods: 'post'
}
this.axios.post("/api/upload/getObjectId",formData,config).then(res=>{
this.fileList.push(file)
if(res.data.flag == 'S'){
this.otherPhotoObj = res.data.data.objectId
this.otherPhoto = res.data.data.url
this.otherLicense.push({
certificationName: this.form.certificationName,
certificationObj: this.otherPhotoObj,
certificationUrl: this.otherPhoto
})
}else{
this.$message.error(res.data.message)
}
})
},
.avatar-uploader /deep/ .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
background-color: #fff;
cursor: pointer;
position: relative;
overflow: hidden;
width: 180px;
height: 180px;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar-uploader /deep/ .el-upload-list__item {
overflow: hidden;
background-color: #fff;
border: 1px solid #c0ccda;
border-radius: 6px;
box-sizing: border-box;
width: 180px;
height: 180px;
margin: 0 8px 8px 0;
display: inline-block;
}
三.上传单张图片，但不显示图片，只显示名称；
<el-upload
action
class="upload-demo"
ref="upload"
:auto-upload="false"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:before-remove="beforeRemove"
:limit="1"
:on-change="fileChange"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
data(){
return{
photoObj: '',
photo: '',
fileList: []
}
}
//删除图片
handleRemove(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning('头像图片最多一张，若要重新上传图片，请先删除当前文件');
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
//上传头像
fileChange(file, fileList) {
this.fileList = fileList
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
const isJPG = typeArr.indexOf(file.raw.type) !== -1;
// image/png, image/jpeg, image/gif, image/jpg
const isLt3M = file.size / 1024 / 1024 < 3;
if (!isJPG) {
this.$message.error('只能是图片!');
this.$refs.upload.clearFiles();
this.files = null;
return;
}
if (!isLt3M) {
this.$message.error('上传图片大小不能超过 3MB!');
this.$refs.upload.clearFiles();
this.files = null;
return;
}
this.files = file.raw;
const formData = new FormData();
formData.append('file', this.files);
let config={
headers: {
"Content-Type": "multipart/form-data"
},
methods:'post'
}
this.axios.post("*****",formData,config).then(res=>{
if(res.data.flag == 'S'){
//返回图片obj和图片url
this.photoObj = res.data.data.objectId
this.photo = res.data.data.url
}else{
this.$message.error(res.data.message)
}
})
},
转自：https://www.cnblogs.com/lesliejavascript/p/14278792.html