提交

MrShi

2025-04-11 3a45da15c947c2d478a44a51bd0f926647b1b841

 company/src/components/common/UploadFile.vue

@@ -1,8 +1,9 @@
<template>
  <div>
    <el-upload
      ref="uploadFileBtn"
      class="upload-demo"
      :accept="uploadData.fileTyp"
      :accept="uploadData.fileType"
      :action="uploadImgUrl"
      :limit="1"
      :before-remove="removes"
@@ -11,8 +12,8 @@
      :on-error="uploadError"
      :before-upload="beforeFileUpload"
      :file-list="fileList">
    <el-button size="small" type="primary">点击上传</el-button>
    <div 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>

@@ -21,47 +22,81 @@
<script>
export default {
  props: {
    fileList:{
      type: Array,
      default: () => []
    },
    file: {
      type: Object,
      default: () => {}
    },
    tipsLabel: '',
    fileIndex: {
      type: Number,
      default: () =>0
    },
    showTips: {
      type: Boolean,
    default: () => true
    },
    customStyle: {
      type: String,
    default: 'width: 190px; height: 190px;'
      default: 'width: 190px; height: 190px;'
    },
    uploadData: Object
  },
  data() {
    return {
      fileList:null,
      uploaded:false,
      // fileList:[],
      uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload?folder='+this.uploadData.folder
    }
  },

  watch: {
    fileList (nv,ov) {
      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.uploaded=false
      this.$emit('remove')
    },
    // 上传图片
    handleExceed(){},
    handleExceed(){
      this.$message.error('只允许上传1个文件，请删除已传文件，重试！')
    },
    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.$tip.apiFailed('上传失败')
        this.$message.apiFailed('上传失败')
      }
      this.$emit('uploadEnd')
    },
    uploadError() {
      this.$tip.apiFailed('上传失败')
      this.$message.apiFailed('上传失败')
      this.$emit('endUpload')
    },
    // // 拦截
    beforeFileUpload(file) {

      this.$emit('uploadBegin')
      return true
    }
@@ -76,12 +111,12 @@
  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;
  height: auto;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
@@ -99,7 +134,7 @@
  width: $image-width;
  height: $image-width;
  display: block;
}
}#67C23A
.tips-style {
  height: 13px;
  font-size: 13px;
@@ -113,6 +148,9 @@
  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;