批量解析二维码

最新推荐文章于 2024-12-14 10:29:42 发布

原创

最新推荐文章于 2024-12-14 10:29:42 发布 · 615 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了如何使用Vue.js实现文件上传，通过解码二维码内容并生成个性化的链接，最终将内容打包成.js文件进行下载。核心功能包括文件选择、二维码解析和内容分享。

<template>
  <div class="app-container">
    <div>
      文件名：<el-input v-model="fileName" :maxlength="100" placeholder="请输入生成的文件名"></el-input>
    </div>
    <div>
      <input id="file" @change="handleFileChange" type="file" name="file" multiple placeholder="点击批量上传客如云二维码"/>
    </div>
  </div>
</template>

<script>
import {decodeFromFile} from 'tc-qrcode'

export default {
  name: "Parse-qrcode",
  data() {
    return {
      fileName: '',
    }
  },
  mounted() {
  },
  methods: {
    async handleFileChange(e) {
      console.log('handleFileChange', e.target.files)
      const files = e.target.files
      const fileList = []

      for(const file of files) {
        const name = file.name
        await decodeFromFile(file).then(res=>{
					console.log(file.name, res);
					let path = `pages/home/index?q=${encodeURIComponent(res)}&scancode_time=${Date.now()}`
					let item = `{"name": "