常见的图片上传展示/下载/二维码解析处理

图片下载

// api
export function imgApi(data) {
  return request({
    url: 'invite/download',
    method: 'get',
    responseType: 'blob',
    params:data
  })
}
--------------------
//a标签包裹图片链接 只会跳转 不会下载
//先获取图标二进制文件，再本地生成链接
    getUrl() {
      return new Promise((resolve, reject) => {
        imgApi({
          codeUrl: this.imgUrl,
        })
          .then((data) => {
            const blob = new Blob([data], {
              type: 'image/png',
            })
            this.tempUrl = window.URL.createObjectURL(blob)
            resolve(true)
          })
          .catch(() => {
            reject(false)
          })
      })
    },
    async download() {
      this.tempUrl = ''
      let flag = await this.getUrl()
      if (flag) {
        let dom = document.createElement('a')
        dom.href = this.tempUrl
        dom.download = 'invite' + this.id
        dom.style.display = 'none'
        document.body.appendChild(dom)
        dom.click()
        dom.remove()
        window.URL.revokeObjectURL(this.tempUrl)
        this.$message({
          type: 'success',
          message: '下载成功',
        })
      }
    },

图片解析二维码

import QrCode from '../../../../../../node_modules/qrcode-decoder/'//这个二维码解析插件只能这样引入 直接写'qrcode-decoder' 不识别

    async copyLink() {
      this.tempUrl = ''
      let flag = await this.getUrl()
      if (flag) {
        var qr = new QrCode()
        qr.decodeFromImage(this.tempUrl).then((res) => {
          var cInput = document.createElement('input')
          cInput.value = res.data
          document.body.appendChild(cInput)
          cInput.select() // 选取文本框内容
          document.execCommand('copy')
          this.$message({
            type: 'success',
            message: '复制成功',
          })
          // 复制成功后再将构造的标签 移除
          document.body.removeChild(cInput)
          window.URL.revokeObjectURL(this.tempUrl)
        })
      }
    },

文件上传展示图片

1. 需要一个input元素

    <input type="file"
           ref="inputFile"
           style="display:none;"
           :accept="accept"
           @change="pickFile" />

2. 需要触发该input的点击事件

          this.accept = '.png,.jpeg,.jpg'
          this.$nextTick(() => {
            this.$refs.inputFile.click()
          })

3. 上传选择完成后的处理

    pickFile(e) {
      file = e.target.files[0]
      let url = window.URL.createObjectURL(file)
      //需要把文件发给后端时，
      let formdata = new FormData()
      formdata.append('file', file)
      uploadFile(formdata)
        .then((el) => {....

4. 离开页面时清缓存

window.URL.revokeObjectURL(url)

从token里解析信息 jwt

let Base64 = require('js-base64').Base64

    let encodeString = getToken().split('.')[1]
    let infoList = JSON.parse(Base64.decode(encodeString)).aud
    this.username = infoList[1]

fiexd定位时 占满屏的方法

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;//fixed定位内部元素过长时 可以滚动

或

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

elment使用table时 表格宽度只会伸长 不会随调整窗口缩小。

原因 ：宽度是动态计算的

三种解决方案

• 方案1
  • table外套一个div, position:absolute//弊端是表格不占文档流 下面元素会浮上来
• 方案2
  • table外套一个el-card
• 方案3

.el-table{
  width: 100%;
  .el-table__header-wrapper table,.el-table__body-wrapper table{
    width: 100% !important;//覆盖行内样式
  }
  .el-table__body, .el-table__footer, .el-table__header{
    table-layout: auto;
  }
}  

原文链接：blog.csdn.net/weixin_4393…

el-tree 展开/闭合

      var nodes = this.$refs.tree.store.nodesMap
      for (var i in nodes) {
        nodes[i].expanded = val //true开 false合
      }

设置color 若未设置border-color 会导致border的颜色和color相同

图片自适应显示的问题

通过背景图

background: url('...') no-repeat; 
background-size: cover; 
background-position: center;//同 background-position:center center；
缩写 background: color img-url repeat attachment position / size
background: url('../../assets/asuka.jpg') no-repeat center center/cover;

通过对img设置

width:;
height:;
object-fit:cover
//`background-position` 的默认值是 `0% 0%`，而 `object-position` 的默认值是 `50% 50%`

object-fit 对所有 可替换元素 都有效;
常见的可替换元素包括：<img>、<video>、<input type="image">、<iframe>、<embed>

• pointer-events: none; 指定元素及其后代元素不会成为鼠标事件的 target，父元素不受影响。

路由拼接

import path from 'path'  //node的path模块
path.resolve('/foo/bar', './baz') // returns '/foo/bar/baz'