el-upload 上传文件

 页面使用el-dialog 弹窗形式显示

上传文件

  
    选择文件
  
  

    取消
    上传
  

js代码

export default {
  data() {
    return {
      // 上传文件参数
      fileUpData: {}, // 文件上传附带参数
      fileUpList: [], // 上传的文件列表
      dialogFileUploadVisible: false,
      upload_file_url: process.env.VUE_APP_ADMIN_BASE_URL + '/common/upload/upload_file', // 文件上传地址
    }
  },
  methods: {
    /**
     * 文件上传弹窗显示
     */
    handleUpFile(row) {
      console.log(row.id)
      this.fileUpData = {
        book_id: row.id
      }
      this.dialogFileUploadVisible = true
    },

    /**
     * 文件上传成功时的钩子
     */
    fileUpSuccess(res, file, fileList) {
      console.log('文件上传成功', res)
      this.$notify.success({
        title: '成功',
        message: `文件上传成功`
      })
      this.fileUpList = []
      this.dialogFileUploadVisible = false
    },

    /**
     * 文件上传失败时的钩子
     */
    fileUpError(err, file, fileList) {
      console.log('文件上传失败', err)
      this.$notify.error({
        title: '错误',
        message: `文件上传失败`
      })
    },

    /**
     * 点击上传按钮时操作
     */
    fileUpload() {
      this.$refs.dataFormFile.submit()
    },
  }
}

 显示效果：