頁面代碼

dialog.vue

<!-- 上傳文件 -->
<template>
  <el-dialog
    title="上傳文件"
    :visible.sync="dialogVisible"
    width="60%"
    top="6vh"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <ele-form
      ref="submitRef"
      v-model="formData"
      inline
      :form-desc="formDesc"
      :request-fn="handleSubmit"
      :is-show-submit-btn="true"
      :is-show-cancel-btn="true"
      submit-btn-text="確定"
      :is-show-error-notify="false"
      @cancel="handleClose"
    >
      <template v-slot:attachmentList>
        <el-upload
          ref="uploadRef"
          v-loading="uploadLoading"
          class="upload_demo"
          list-type="picture-card"
          :accept="fileTypeList.join(',')"
          action="/supervise_basic/upload/oss/fileupload"
          name="files"
          multiple
          :file-list="fileList"
          :headers="{ 'X-Token': getToken() }"
          :data="{ relativePath: 'SCWS/' }"
          :on-success="onSuccessHandler"
          :on-error="onErrorHandler"
          :on-remove="onRemoveHandler"
          :before-upload="beforeUploadHandler"
        >
          <i slot="default" class="el-icon-plus" />
          <div slot="file" slot-scope="{ file }" class="el_upload_preview_list">
            <!-- pdf 文件展示文件名 -->
            <div v-if="['application/pdf'].includes(file.raw.type)" class="pdfContainer">
              {{ file.name }}
            </div>
            <!-- 圖片預(yù)覽 -->
            <el-image
              v-else
              :id="'image' + file.uid"
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              :preview-src-list="[file.url]"
            />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in" />
              </span>
              <span class="el-upload-list__item-delete" @click="onRemoveHandler(file)">
                <i class="el-icon-delete" />
              </span>
            </span>
          </div>
          <template v-slot:tip>
            <div class="el_upload_tip">
              僅支持上傳{{ fileTypeList.join('/') }}格式文件，且不超過{{ fileMaxSize }}MB。
            </div>
          </template>
        </el-upload>
      </template>
    </ele-form>
  </el-dialog>
</template>

<script>
import _ from 'lodash.clonedeep'
import { getToken } from '@/utils/tool'
import { uploadBloodFile } from '@/api/blood_api.js'

export default {
  name: 'UploadFileDialog',
  components: {},

  data() {
    return {
      dialogVisible: true,
      rowData: {},
      formData: {
        attachmentList: []
      },
      uploadLoading: false,
      fileTypeList: ['.png', '.jpg', '.jpeg', '.pdf'],
      fileMaxSize: 5,
      fileList: [],
      getToken
    }
  },

  computed: {
    formDesc() {
      return {
        xbrq: {
          type: 'date',
          layout: 24,
          label: '日期',
          required: true,
          attrs: {
            valueFormat: 'yyyy-MM-dd'
          },
          class: {
            textareaTop: true
          },
          style: {
            marginBottom: '10px'
          }
        },
        attachmentList: {
          type: 'upload',
          layout: 24,
          label: '上傳文件',
          required: true
        }
      }
    }
  },

  watch: {
    dialogVisible() {
      this.$refs.submitRef &&
        this.$refs.submitRef.$refs.form &&
        this.$refs.submitRef.$refs.form.clearValidate()
    }
  },

  created() {
    const list = []
    this.fileTypeList.forEach((item) => {
      list.push(item, item.toUpperCase())
    })
    this.fileTypeList = [...list]
  },

  methods: {
    open(rowData) {
      console.log('rowData----', rowData)
      this.rowData = _(rowData)

      this.dialogVisible = true
    },

    beforeUploadHandler(file) {
      const ext = file.name.substring(file.name.lastIndexOf('.'))
      const isLt = file.size / 1024 / 1024 < this.fileMaxSize

      if (!this.fileTypeList.includes(ext)) {
        this.$message.error(`請上傳${this.fileTypeList.map((item) => item)}格式的文件！`)
        return false // 會(huì)調(diào)用 on-remove 鉤子
      } else if (!isLt) {
        this.$message.error('上傳文件大小不能超過 5MB!')
        return false // 會(huì)調(diào)用 on-remove 鉤子
      } else {
        this.uploadLoading = true
        return true
      }
    },

    onRemoveHandler(file, fileList) {
      /**
       * fileList 有無值取決于是上傳失敗調(diào)用 on-remove 鉤子，還是手動(dòng)點(diǎn)擊刪除按鈕刪除文件，詳細(xì)解釋如①②：
       *    ① 如果文件上傳失敗（before-upload 中return false）會(huì)自動(dòng)調(diào)用 on-remove 鉤子（不用我們自己處理刪除文件），此時(shí)第二個(gè)參數(shù) fileList 有值（為數(shù)組）；
       *    ② 如果手動(dòng)點(diǎn)擊刪除文件按鈕刪除，此時(shí) fileList 是沒有的，為 undefined；
       *    因此通過 fileList 來判斷是否執(zhí)行 on-remove 鉤子中我們自己處理移除文件（避免：已經(jīng)上傳了N張圖片后，上傳不符合要求的圖片時(shí)調(diào)用當(dāng)前方法導(dǎo)致第 N-1 張圖片被刪除）
       */
      if (fileList) return

      const { uploadFiles } = this.$refs.uploadRef
      uploadFiles.splice(
        uploadFiles.findIndex((item) => item.uid === file.uid),
        1
      )
      this.formData.attachmentList.splice(
        this.formData.attachmentList.findIndex(
          (item) => item.uid === file.uid && item.filename === file.name
        ),
        1
      )
      this.$refs.submitRef &&
        this.$refs.submitRef.$refs.form &&
        this.$refs.submitRef.$refs.form.validateField('attachmentList')
    },

    // eslint-disable-next-line handle-callback-err
    onErrorHandler(err, file, fileList) {
      this.uploadLoading = false
      this.$message.error(`${file.name}文件上傳失敗，請重新上傳！`)
    },

    // 文件上傳成功
    onSuccessHandler(response, file) {
      this.uploadLoading = false
      console.log('response----', response)
      const fileList = response.data.fileUploadInfoList
        ? response.data.fileUploadInfoList.map((item) => {
            return {
              filename: item.filename,
              saved_filename: item.path,
              filetype: item.fileType,
              uid: file.uid
            }
          })
        : []
      this.formData.attachmentList.push(...fileList)
      // 部分表單校驗(yàn)
      this.$refs.submitRef &&
        this.$refs.submitRef.$refs.form &&
        this.$refs.submitRef.$refs.form.validateField('attachmentList')
    },

    // 預(yù)覽 pdf、圖片
    handlePictureCardPreview(file) {
      // 預(yù)覽pdf
      if (['application/pdf'].includes(file.raw.type)) {
        window.open(file.url)
        return
      }
      // 預(yù)覽文件
      const imageDom = document.getElementById('image' + file.uid)
      imageDom && imageDom.click()
    },

    handleSubmit() {
      this.$refs.submitRef.validate().then((valid) => {
        const { id, voucher_no } = this.rowData
        const { attachmentList, xbrq } = this.formData
        const params = {
          id,
          voucher_no,
          xgws: attachmentList.map((item) => {
            return {
              wsmc: item.filename,
              wsdz: item.saved_filename,
              xbrq: xbrq
            }
          })
        }
        uploadBloodFile(params).then((res) => {
          this.$common.CheckCode(res, res.msg || '上傳成功', () => {
            this.handleClose()
            this.$emit('update')
          })
        })
      })
    },

    handleClose() {
      this.rowData = {}
      this.fileList = []
      for (const key in this.formData) {
        if (this.formData[key] && this.formData[key].constructor === Array) {
          this.formData[key] = []
        } else if (this.formData[key] && this.formData[key].constructor === Object) {
          this.formData[key] = {}
        } else {
          this.formData[key] = ''
        }
      }
      this.dialogVisible = false
    }
  }
}
</script>

<style lang='scss' scoped>
@import '@/styles/dialog-style.scss';
</style>

樣式代碼

@/styles/dialog-style.scss

::v-deep .el-dialog {
  min-width: 760px;
  .el-dialog__header {
    font-weight: 700;
    border-left: 3px solid #00a4ff;
  }
  .el-dialog__headerbtn {
    top: 13px;
  }

  .ele-form {
    .el-form-item__error {
      top: 75%;
    }
    .el-form-item {
      margin-bottom: 0;
    }
    .ele-form-btns {
      width: 100%;
      .el-form-item__content {
        text-align: right;
      }
    }

    // ele-form 表單項(xiàng)為 textarea 時(shí)，當(dāng)前表單項(xiàng)和上一個(gè)表單項(xiàng)校驗(yàn)提示文字位置調(diào)整
    .textareaTop {
      & + .el-form-item__error {
        // 上一個(gè)表單項(xiàng)檢驗(yàn)提示文字位置
        top: 65% !important;
      }
    }
    .currentTextarea {
      & + .el-form-item__error {
        // 當(dāng)前 textarea 表單項(xiàng)檢驗(yàn)提示文字位置
        top: 92% !important;
      }
    }
  }

  .upload_demo {
    margin-top: 8px;
    & + .el-form-item__error {
      top: 156px !important;
    }
  }
}

.dialog_section_title {
  margin: 10px -20px;
  padding: 10px 20px;
  // background-color: #eee;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  border-left: 3px solid #00a4ff;
  font-weight: 700;
  text-align: left;
}

.noData {
  padding: 10px 0;
  text-align: center;
  color: #ccc;
}

.el_upload_tip {
  margin-top: 15px;
  line-height: 20px;
  text-align: left;
  color: red;
}

.el_upload_preview_list {
  height: 100%;
  // el-uplaod組件卡片預(yù)覽類型預(yù)覽pdf樣式
  .pdfContainer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.blue-theme {
  .dialog_section_title {
    border-top: 1px solid #202936;
    border-bottom: 1px solid #202936;
  }
}

.night-theme {
  .dialog_section_title {
    border-top: 1px solid #202936;
    border-bottom: 1px solid #202936;
  }
}

頁面展示

文章來源地址http://www.zghlxwxcb.cn/news/detail-736333.html

到了這里，關(guān)于el-upload 組件上傳/移除/報(bào)錯(cuò)/預(yù)覽文件，預(yù)覽圖片、pdf 等功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！