Vue项目常见的文档导入调接口

简介: Vue项目常见的文档导入调接口

本期为Vue项目常见的文档导入调接口需求, 提供给不太懂的朋友, 本人萌新一枚, 写的不好各位大佬还请谅解, 感谢!!!


本文分为两阶段 —— 1: 代码块阶段     2: 图文阶段 (框架为 ElementUI)


代码块阶段

结构样式👇

以下upload-file, 是我自己封装的ElementUI的<el-upload></el-upload>

<div style="float: right; margin-left: 10px;">
     <upload-file
        text="模板导入" 
        :data="otherData" 
        :url="uploadURL" 
        @success="uploadSuccess"
>
     </upload-file>
 </div>

为了方便学习, 下面代码块为封装结构(--建议还是写el-upload吧--)👇

<template>
  <!--使用说明:
        <upload-file text="导入" :url="uploadUrl" @success="uploadCallback"></upload-file>
        属性
            text:为上传按钮显示的文字,必填
            url:为上传的url地址,必填
            btnQx:权限按钮控制,若不需控制按钮权限,不传即可,有权限按钮控制,值为是否有权限的boolear值
            accept:上传文件类型,默认为excel
            disabled:禁用 默认false
        事件:
            success:上传成功的回调函数,返回后台返回的值
  -->
  <el-upload
    class="upload-demo"
    v-if="btnQx"
    :action="url"
    :data="data"
    :drag="drag"
    :headers="importHeaders"
    :on-success="uploadSuccess"
    :on-progress="uploadLoading"
    :before-upload="beforeAvatarUpload"
    :on-error="uploadError"
    :show-file-list="false"
    :accept="accept"
    style="display: inline-block;"
    :disabled="disabled"
  >
    <slot>
      <el-button :type="btnType" size="mini" :disabled="disabled">
        <i class="iconfont icon-daoru1"></i>
        {{ text }}
      </el-button>
    </slot>
  </el-upload>
</template>
<script>
import { getToken } from '@/util/auth'
import website from '@/config/website'
import { Base64 } from 'js-base64'
export default {
  name: 'UploadFile',
  props: {
    btnType: {
      type: String,
      default: 'primary',
    },
    text: {
      type: String,
      default: '导入',
    },
    drag: {
      type: Boolean,
      default: false
    },
    btnQx: {
      type: Boolean,
      default: () => true,
    },
    data: {
      type: Object,
      default: () => {
        return {}
      },
    },
    url: {
      type: String,
      required: true,
    },
    accept: {
      type: String,
      default: '.xls,.xlsx',
    },
    disabled: {
      type: Boolean,
      default: () => false,
    }
  },
  data() {
    return {
      importHeaders: {
        Authorization: `Basic ${Base64.encode(
          `${website.clientId}:${website.clientSecret}`
        )}`,
        'MagicCube-Auth': 'bearer ' + getToken(),
      },
      loading: false,
      imgQuality: 0.3,
    }
  },
  methods: {
    uploadSuccess(res) {
      // this.loading.close();
      this.$emit('success', res)
    },
    uploadLoading() {
      this.loading = this.$loading({
        lock: true,
        text: '正在努力上传,请稍后...',
        spinner: 'el-icon-loading',
      })
    },
    uploadError(err) {
      let obj = JSON.parse(err.toString().replace(/(Error: )/, ''))
      // this.loading.close();
      this.$message.error(obj.msg)
    },
    dataURItoBlob(dataURI, type) {
      var binary = atob(dataURI.split(',')[1])
      var array = []
      for (var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i))
      }
      return new Blob([new Uint8Array(array)], { type: type })
    },
    beforeAvatarUpload(file) {
      if (file.name.search('[.]+(jpg|jpeg|swf|gif|png|JPG|JPEG|SWF|GIF|PNG)$') != -1) {
        const _this = this
        return new Promise((resolve) => {
          const reader = new FileReader()
          const image = new Image()
          image.onload = () => {//(imageEvent) => {
            const canvas = document.createElement('canvas')
            const context = canvas.getContext('2d')
            const width = image.width * _this.imgQuality
            const height = image.height * _this.imgQuality
            canvas.width = width
            canvas.height = height
            context.clearRect(0, 0, width, height)
            context.drawImage(image, 0, 0, width, height)
            const dataUrl = canvas.toDataURL(file.type)
            const blobData = _this.dataURItoBlob(dataUrl, file.type)
            resolve(blobData)
          }
          reader.onload = (e) => {
            image.src = e.target.result
          }
          reader.readAsDataURL(file)
          console.log(file.size)
        })
      }else if (file.name.search('[.]+(pdf|PDF|doc|DOC|docx|DOCX|XLSX|xlsx|xls|XLS)$') != -1){
          console.log(file)
          if (file.size > 5242880){
              this.$message.warning('上传文件不能大于5M!');
              return false
          }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.fileImage {
  margin-top: 10px;
}
</style>

数据结构👇

export default {
  components: { UploadFile }, // 引入的封装结构
  name: "upload", // 完全自定义name, 不会有人不知道吧, 不会吧不会吧(doge)
  data () {
    return {
      uploadURL: importCompanyExcel, // 接口的url地址
      otherData: {
        CompanyDetailId: this.$store.getters.customer.id // 接口需要的参数
      }
    }
  }
}
// 此代码块为存放接口的 JS 文件
// 文档导入操作
export const importCompanyExcel = "请求的接口URL";

上传成功钩子函数👇

uploadSuccess (res) {
  if (res.code == 200) { // 接口返回200(成功)
    this.getList(this.pagination); // 调用其他接口
    this.$alert(res.msg, '提示', {
      confirmButtonText: '确定',
      callback: () => {
        this.page.currentPage = 1
        this.onLoad(this.page, this.query) // 调用其他接口
      },
    })
  } else {
    this.$message.error(res.msg) // 失败
  }
},

 


图文阶段(简单暴力上图)👇

结构样式

 

 数据结构

 

引入接口

 



    本文比较简单粗暴, 不会讲解太详细, 希望各位见谅, 本人还是萌新🤗

感谢各位佬

相关文章
|
2天前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
36 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
3天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
42 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
1天前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
28 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
5天前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
43 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
4天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
53 12
|
21天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
48 8
|
22天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
60 1
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
141 1
|
3月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
108 58
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章