web批量导入(包括文本和图片)

<template>
  <div class="hello">
    <div class="txt_box">
      上传文案：
      <input type="file" ref="textSelect" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" single @change="getTextChange">
    div>
    <div class="img_box" v-for='(item, index) in textList' :key='index'>
      请上传第{{ index }}条任务的图片(第一张图将被作为封面图):
      <input type="file" :id='"imgInput" + index' name="files" :ref='"imgInput" + index' accept="image/*" multiple @change="uploadImgHandle(index)">
    div>
    <button @click="submitTaskHandle">提交任务button>
  div>
template>

<script>
import * as XLSX from 'xlsx'
import { uploadImgApi } from '../api/upload'
import { addTask } from '../api/system/task'
export default {
  data(){
    return {
      // 文本数据：
      textList: [],
      // 最终数据：
      submitList:[]
    }
  },
  methods: {
    // 选择文案：
    getTextChange(e) {
      // 获取上传的文件
      const file = e.target.files[0]
      // 读取Excel文件
      const readTextFile = new FileReader()
      readTextFile.onload = e => {
        const data = new Uint8Array(e.target.result)
        const tableData = XLSX.read(data, { type: 'array' })
        // 第一个工作表
        const sheetName = tableData.SheetNames[0]
        // 工作表中数据
        const sheetData = tableData.Sheets[sheetName]
        // 将Excel数据转换成对象数组
        const jsonData = XLSX.utils.sheet_to_json(sheetData, { header: 1, encoding: 'UTF-8' })
        // 获取表头和数据
        // const tabHead = jsonData[0]
        const tabList = jsonData.slice(1)
        this.transformTextList(tabList)
      }
      readTextFile.readAsArrayBuffer(file)
    },
    // 处理文案数据
    transformTextList(list) {
      let tempList = []
      let obj
      list.forEach((item, index) => {
        obj = {}
        console.log(item,'item')
        obj.pid = index
        obj.taskName = item[0] // excel表格第一列内容
        obj.time = item[1] // excel表格第二列内容
        obj.taskType = '0'
        tempList.push(obj)
      })
      this.textList = tempList
    },
    // 上传图片：
    uploadImgHandle(i){
      let keys = 'imgInput' + i
      let files = document.getElementById(keys).files
      let formData = new FormData()
      for(var j = 0; j < files.length; j++){
        formData.append('files',files[j])
      }
      uploadImgApi(formData).then((res) => {
        let itemImg = {}
        if (res.code == 200) {
          let tempImg = res.fileNames && res.fileNames.split(',')
          itemImg.pid = i
          itemImg.coverImage = tempImg[0]
          itemImg.img = (tempImg.slice(1)).toString()
          this.transFormSubmitHandle(itemImg)
        }
      })
      this.$refs[keys].value = null
    },
    // 处理最终数据：
    transFormSubmitHandle(e){
      let item = this.textList.find(its => its.pid == e.pid)
      console.log(item,'item')
      this.submitList.push({
        ...item,
        ...e
      })
    },
    // 提交任务：
    submitTaskHandle(){
      if (this.submitList.length == 0) return console.log('请上传任务表格和选择图片') 
      let i = 0
      const submit = () => {
        if (i < this.submitList.length) {
          let its = this.submitList[i]
          let obj = {
            ...its,
            projectId: 0 // 传项目id
          }
          addTask(obj).then((res) => {
            if (res.code == 200) {
              i++
              submit()
            } else {
              // 上传任务失败
            }
          })
        } else {
          // 关闭模态框
          this.textList = []
          this.submitList = []
          this.$refs.textSelect.value = null
        }
      }
      submit()
    }
  }
}
script>
<style scoped>
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海123
其它问题可通过以下方式联系本人咨询：
QQ：810665436
微信：ConstancyMan