elementUI上传组件改造--扫码上传

1、需求

接到客户方的需求:web端如果要上传图片,通常得,

1、手机拍照

2、拷贝到电脑

3、电脑再点击上传(手机的安全性,不熟悉的话,十分麻烦)

客户需要直接在手机上直接上传到系统,十分合理,非常有价值的功能

2、分析

1、跨终端(打通pc和移动端的壁垒)

2、不影响原有功能(不改动原来代码,否则,可能会导致业务逻辑改变,会需要测试同事重新测试,需避免)

3、手机上传后,怎么pc端如何监听,并做反馈操作(主动触发即可)

3、实现

1、跨终端

依照现有的JWT,可以通过url携带token的方式,携带token到h5端,那么,这个时候就可以上传图片了

2、pc端生成二维码

qrcode.js 可以生成二维码,把扫码上传的项目部署了,pc端用该地址拼接token,即可生成携带token的二维码了

3、不影响原有功能

这个功能需要对原有上传组件的二次封装,我们使用的是elementUI,采用的是上传组件,一如我上一篇文章所说,需要进行二次封装,由于是组件,在组件上,还能进行各种自定义的封装,例如动态加一个class,例如,添加一个原生click事件,开发完全自主,所以,得用上render,利用完全js实现无痛轻松过度

代码:

<script>
import { Upload } from ‘element-ui‘
import QRCode from ‘qrcode‘
import { getFileUploadCode, getFileUrlByCode } from ‘@/const/fileLibraryApi.js‘
import { hasIn } from ‘lodash‘
export default {
  name: ‘MyUpload‘,
  components: { mUpload: Upload },
  data () {
    return {
      qrcodeImg: ‘‘,
      backVisible: false,
      qrcodeLoading: false,
      code: ‘‘
    }
  },
  methods: {
    qrcodeBtn () {
      this.backVisible = true
      this.qrcodeLoading = true
      let originUrl = window.location.origin.includes(‘.com‘) ? window.location.origin : ‘https://xxx.com‘
      this.$axios({
        url: getFileUploadCode,
        method: ‘post‘
      }).then(res => {
        let code = hasIn(res, [‘data‘, ‘payload‘]) ? res.data.payload : ‘‘
        if (!code) {
          this.$message({ type: ‘warning‘, message: ‘获取状态码失败,请联系管理员!‘ })
          return
        }
        this.code = code
        QRCode.toDataURL(`${originUrl}/xx-h5/#/file?token=${this.$store.state.token}&code=${code}`)
          .then(url => {
            this.qrcodeImg = url
            this.qrcodeLoading = false
          })
          .catch(() => {
            this.$message({ type: ‘error‘, message: ‘生成二维码失败,建议使用本地上传!‘ })
          })
      })
    },
    // 取消提示
    cancleConfirm () {
      this.$confirm(‘还未检测到通过二维码上传的文件,是否取消二维码上传?‘, ‘提示‘, {
        confirmButtonText: ‘确定‘,
        cancelButtonText: ‘取消‘,
        type: ‘warning‘
      }).then(() => {
        this.backVisible = false
      }).catch(() => {
        this.qrcodeLoading = false
      })
    },
    backClick () {
      this.qrcodeLoading = true
      this.$axios({
        url: getFileUrlByCode,
        method: ‘post‘,
        data: { code: this.code }
      }).then(res => {
        let imgUrl = hasIn(res, [‘data‘, ‘payload‘]) ? res.data.payload : ‘‘
        if (!imgUrl) {
          this.cancleConfirm()
          return
        }
        let mProps = this.$attrs[‘m-props‘]
        mProps.urlObj[mProps.urlStr] = imgUrl
        this.backVisible = false
      }).catch(() => {
        this.backVisible = false
        this.$message({ type: ‘warning‘, message: ‘获取上传图片失败,建议使用本地上传!‘ })
      })
    }
  },
  render (h) {
    const attrsMethods = slots => {
      let values = Object.values(slots)
      let sList = []
      values.forEach(vnodes => {
        sList.push(vnodes)
      })
      return sList
    }
    const qrcodeShow = (h) => {
      return this.backVisible ? h(
        ‘div‘,
        {
          class: { ‘back-mask‘: true },
          on: {
            ‘click‘: this.backClick
          }
        },
        this.qrcodeImg ? [h(
          ‘el-image‘,
          {
            ‘class‘: { ‘back-qrcode-img‘: true },
            directives: [{ name: ‘loading‘, value: this.qrcodeLoading }],
            props: { fit: ‘fitType‘, src: this.qrcodeImg }
          }
        )] : []
      ) : []
    }
    return h(‘div‘, { class: { ‘qrcode_upload_box‘: true } }, [
      h(
        ‘m-upload‘,
        {
          props: this.$attrs,
          on: this.$listeners,
          ref: ‘mUpload‘
        },
        attrsMethods(this.$slots)
      ),
      h(‘el-button‘, {
        class: { ‘qrcode_box‘: true },
        props: {
          icon: ‘el-icon-mobile-phone‘,
          circle: true,
          disabled: this.$attrs.disabled
        },
        attrs: { title: ‘手机上传二维码‘ },
        on: {
          click: this.qrcodeBtn
        }
      }),
      qrcodeShow(h)
    ])
  }
}
</script>
<style lang="less" scoped>
.qrcode_upload_box {
  position: relative;
  width: 100%;
  height: 100%;
  .qrcode_box {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, 50%);
    z-index: 99;
  }
  .back-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    .back-qrcode-img {
      width: 250px;
      height: 250px;
    }
  }
}
</style>

以上是完整功能代码,包括了:如何判断是哪个控件的上传?是否重复上传了?上传后怎么在pc端渲染出来?前两个问题需要后端提供支持,最后一个问题,实际上利用了内存地址的方式

原文地址:https://www.cnblogs.com/baimulan/p/12053737.html

时间: 2024-10-05 20:54:59

elementUI上传组件改造--扫码上传的相关文章

啤酒饮品行业扫一扫码上有红包对商家有什么好处

如今,扫码红包在市场上是很火爆的,基本所有做营销促销类的公司或者产品都想要用扫码应用进行去推广,对于啤酒饮品快消行业,即使是夏日旺季,厂家早已布局促销活动.什么样的促销方式才能帮助商家赚取更多利益呢. 夏季啤酒饮品行业扫一扫码上有红包解决商家哪些难题 恒大冰泉给所有啤酒饮料企业做了一个绝佳的示范.在2015年夏季,恒大冰泉曾经交出过一份单月7亿销售额的成绩单,对任何一个矿泉水企业而言,这都是一个梦寐以求的数字. 据调查,恒大冰泉之所以能交出这么一份成绩单,最根本的原因就是采用了一种全新的促销方式

疫情之下,线上办公如何解决扫码故障问题?

疫情期间,为减少人员频繁接触,脱离纸质故障报修单,实现线上办公,在线扫码故障报修系统是最佳选择!青鸟报修云推出最新的故障报修系统,使用简单,操作快捷,不同于传统故障报修管理系统,通过扫码即可完成故障报修提交,无需注册,登录等繁琐步骤,受到企业们的青睐. 扫码故障报修系统操作指南 第1步.注册并填写企业基本信息提交审核 1)在电脑端打开青鸟报修云官网 第2步.添加企业故障类型并下载企业报修二维码 1)添加故障报修类型,用于企业员工报修时选择,如网络故障2)下载企业统一的报修二维码,有两种二维码,单

Flash上传组件之SWFUpload文件上传

一.什么是SWFUpload? SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式. 目前此项目放在:https://code.google.com/p/swfupload/ 对应的中文API:http://leeon.me/upload/other/swfupload.html 由于SWF

单独调用kindeditor的多图上传组件实现多图上传

本例是单独调用kindeditor多图上传的组件来进行多图上传,兼容性你懂得! 官方示例地址:http://kindeditor.net/ke4/examples/multi-image-dialog.html Html JS

微信扫码领红包系统开发定制

微信扫码领红包系统定制,微信扫码领红包系统开发,陈先生135.7001.0501微电,微信扫码领红包系统,微信扫码领红包系统报价. 全民喝章贡"码"上有红包活动现已开端.采购带有活动标贴的章贡王醇和五年,扫一扫瓶盖上的二维码即可马上扫出1.8元-58.8元金额不等的现金红包!百分百中奖率,扫到多少现金,完全看手气! 注:只要带活动标贴(如蓝框中)的产品才干扫到红包哦▼ 微信扫码领红包系统:线下日子中的大家相互赠送的红包便是传统红包,从其代表的含义来看,传统红包的情面味更浓,实用性更强.

网页版微信和微信公共号扫码登陆原理分析

看到知乎上有关于微信扫码登陆原理的讨论.现将自己的分析结果写出来,供大家参考,不正确的地方望指正. 用户打开网页版微信: https://wx.qq.com/,微信为用户生成了一张包含uuid的二维码,然后前台向后台发送轮询请求,查询此uuid是否已被绑定上登录签名.但如果uuid尚未绑定登录签名,后台不回立即返回结果,而是会阻塞30秒左右,在30秒内仍未扫描成功,后台会返回一个结果码.结果码的值为408,代表微信客户端尚未扫描. 发送轮询请求,判断uuid是否绑定了用户的登陆签名 如果30秒内

微信公众号开发(二)--扫码绑定微信账号

简书地址:https://www.jianshu.com/p/b2884a226247 当业务系统产生消息需要通过微信推送给指定的用户时,首页需要将业务系统类的用户和微信账号建立一个关系.这里采用的是微信网页授权接口,获得微信用户授权后,获取微信用户的账号信息,并与业务系统的用户进行绑定. 微信网页授权流程主要有4步: 1.引导用户进入授权页面同意授权,获取code. 2.通过code换取网页授权access_token(与基础支持中的access_token不同). 3.如果需要,开发者可以刷

反向工程解析QQ扫码登录的OAuth2流程

1. 引言-与OAuth2有关 ??OAuth 2.0协议(RFC 6749)被广泛应用于互联网应用中,最常见的可能就是第三方授权登录应用了.在许多应用网站中用户登录时,可以使用支付宝.微信.QQ的已有账号进行登录,这些应用网站与阿里.腾讯共享了用户的信息和资源.??OAuth 2.0协议的中心思想是让请求用户资源的一方(在RFC 6749中被称为client)向资源拥有方请求访问权限,请求访问权限的过程不是通过使用用户在资源拥有方的访问权证获得,而是将用户引向资源拥有方的授权服务器(Autho

LV4500L二维码模块助阵高速公路远距离收费:扫码通关应用

LV4500L二维扫描模块是一款集远距.高性能.大范围广角扫码等优点的优质二维码扫描器,它设计的初衷就是考虑到解决一些远距离扫码的需求,如智能交通领域上停车场/高速公路远距离扫码缴费使用.据调研发现,如今很多O2O自助设备都需要支持自感应"二维码扫码"功能,但支持远距离读码的少之甚少,此情此景下专为远距扫码而生的LV4500L就解决了很多行业的需求.据了解,LV4500L二维码扫描模块常被集成内嵌到停车场自助缴费机.高速公路扫码缴费设备等用于读取手机屏幕上的支付码信息.它采用自主研发的