|  |  |  | 
|---|
|  |  |  | <el-upload | 
|---|
|  |  |  | ref="uploadFileBtn" | 
|---|
|  |  |  | class="upload-demo" | 
|---|
|  |  |  | :accept="uploadData.fileTyp" | 
|---|
|  |  |  | :accept="uploadData.fileType" | 
|---|
|  |  |  | :action="uploadImgUrl" | 
|---|
|  |  |  | :limit="1" | 
|---|
|  |  |  | :limit="limit" | 
|---|
|  |  |  | :before-remove="removes" | 
|---|
|  |  |  | :on-exceed="handleExceed" | 
|---|
|  |  |  | :on-success="handleFileSuccess" | 
|---|
|  |  |  | :on-error="uploadError" | 
|---|
|  |  |  | :before-upload="beforeFileUpload" | 
|---|
|  |  |  | :file-list="fileList"> | 
|---|
|  |  |  | <el-button size="small" type="primary"  >点击上传</el-button> | 
|---|
|  |  |  | <div style="display: inline-block"  slot="tip" class="el-upload__tip">(只能上传{{ uploadData.fileType }}文件,且不超过5mb)</div> | 
|---|
|  |  |  | <el-button  size="small" type="primary"  >点击上传</el-button> | 
|---|
|  |  |  | <div style="display: inline-block;position: absolute"  slot="tip" class="el-upload__tip" v-if="showTips">{{'(只能上传'+uploadData.fileType +'文件,且不超过5mb)'}}</div> | 
|---|
|  |  |  | </el-upload> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | type: Object, | 
|---|
|  |  |  | default: () => {} | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | tipsLabel: '', | 
|---|
|  |  |  | fileIndex: { | 
|---|
|  |  |  | type: Number, | 
|---|
|  |  |  | default: () =>0 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | showTips: { | 
|---|
|  |  |  | type: Boolean, | 
|---|
|  |  |  | default: () => true | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | customStyle: { | 
|---|
|  |  |  | type: String, | 
|---|
|  |  |  | default: 'width: 190px; height: 190px;' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | uploadData: Object | 
|---|
|  |  |  | uploadData: Object, | 
|---|
|  |  |  | limit: { | 
|---|
|  |  |  | type: Number, | 
|---|
|  |  |  | default: () => 1 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | uploaded:false, | 
|---|
|  |  |  | // fileList:[], | 
|---|
|  |  |  | uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload?folder='+this.uploadData.folder | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | if(this.fileList ==null){ | 
|---|
|  |  |  | this.fileList = new Array(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if(this.fileList.length == 0){ | 
|---|
|  |  |  | this.uploaded = false | 
|---|
|  |  |  | }else{ | 
|---|
|  |  |  | this.uploaded=true | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // alert(this.fileList) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | tipsLabel (nv,ov) { | 
|---|
|  |  |  | if(this.tipsLabel ==null){ | 
|---|
|  |  |  | this.tipsLabel = '' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | removes() { | 
|---|
|  |  |  | this.$emit('remove') | 
|---|
|  |  |  | removes(e) { | 
|---|
|  |  |  | this.uploaded=false | 
|---|
|  |  |  | console.log(e.imgaddr) | 
|---|
|  |  |  | this.$emit('remove', e.imgaddr) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 上传图片 | 
|---|
|  |  |  | handleExceed(){ | 
|---|
|  |  |  | 
|---|
|  |  |  | handleFileSuccess(res, file) { | 
|---|
|  |  |  | if (res.code == 200) { | 
|---|
|  |  |  | let { data } = res | 
|---|
|  |  |  | this.uploaded = true | 
|---|
|  |  |  | // this.fileList = [{name: data.originname, url: data.url }] | 
|---|
|  |  |  | this.$message.success('上传成功') | 
|---|
|  |  |  | this.$emit('uploadSuccess', { fileurl: data.imgaddr,  fileurlFull: data.url, name: data.originname }) | 
|---|
|  |  |  | this.$emit('uploadSuccess', { fileurl: data.imgaddr,  fileurlFull: data.url, name: data.originname ,index:this.fileIndex}) | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | this.$message.apiFailed('上传失败') | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | height: $image-width; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ::v-deep .el-upload { | 
|---|
|  |  |  | border: 1px dashed #d9d9d9; | 
|---|
|  |  |  | //border: 1px dashed #d9d9d9; | 
|---|
|  |  |  | border-radius: 6px; | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | 
|---|
|  |  |  | width: $image-width; | 
|---|
|  |  |  | height: $image-width; | 
|---|
|  |  |  | display: block; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }#67C23A | 
|---|
|  |  |  | .tips-style { | 
|---|
|  |  |  | height: 13px; | 
|---|
|  |  |  | font-size: 13px; | 
|---|
|  |  |  | 
|---|
|  |  |  | width: 90px !important; | 
|---|
|  |  |  | height: 90px !important; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ::v-deep .el-upload-list__item-name{ | 
|---|
|  |  |  | color: #67C23A; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ::v-deep .el-upload-list__item { | 
|---|
|  |  |  | width: 80% !important; | 
|---|
|  |  |  | height: 50px !important; | 
|---|