一，只允許上傳一張，顯示圖片,以表單形式提交；
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) } }) },