首页 > 其他分享 >Django+vue 上传execl文件并解析

Django+vue 上传execl文件并解析

时间:2023-03-03 13:58:03浏览次数:43  
标签:execl vue sheet colx 上传 Django file data

Django+vue 上传execl文件并解析

VUE

<template>
      <el-button type="primary" class="but_list_but1"><input type="file" name="avatar" id="avatar" style="display: none"
                                                             @change="upload('/api/v1/admin/product/load/',$event)"><label
          for="avatar">导入</label></el-button>
</template>
<script>
import axios from "axios";
import {MessageBox, Message} from 'element-ui'
import {Loading} from 'element-ui'

const http = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API,
  baseURL: '/api',
  timeout: 60000,
  withCredentials: true
})
export default {
      methods: {
              /**
     * 上传
     * @param url
     * @param data
     */
    upload(url, file, data) {
      const formData = new FormData()
      formData.append('file', file.target.files[0])

      // 附加数据
      if (data) {
        Object.keys(data).forEach(key => {
          formData.append(key, data[key])
        })
      }

      return new Promise((resolve, reject) => {
        // 打开
        const loading = Loading.service({
          text: '正在上传数据...',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        http
            .request({
              url: url,
              method: 'post',
              data: formData,
              timeout: 1200000
            })
            .then(response => {
                console.log(response)
                loading.close()
                resolve(response)
              }
            })
            .catch(err => {
              loading.close()
              reject(err)
            })
      })
    },
      }
}
</script>

Django

    '''
    	首先需要安装xlrd
    	pip install xlrd==1.2.0
    	推荐安装老版本,xlrd版本原因,好像最新的版本不支持读取xlsx文件了,新版本会报错
    '''
    def leading_in(self, request):
        '''
        导入商品列表
        '''
        file = request.FILES.get('file')
        from io import BytesIO, StringIO
        sio = BytesIO()
        for i in file:
            sio.write(i)  # 将数据写入io对象
        data = xlrd.open_workbook(file_contents=sio.getvalue())  # 如果传入的是io数据对象,那么别忘了传参的时候要用关键字file_contents=指定一下
        # 根据索引获取第一个sheet工作簿
        sheet = data.sheet_by_index(0)
        # 获取execl中的行数
        rows_count = sheet.nrows
        # 获取execl的列数
        cols_count = sheet.ncols
        # print(sheet.name, rows_count, sheet.ncols)  # sheet名称,行数,列数
        for i in range(1, rows_count):
            # rowx表示是获取第几行的数据
            # start_col表示列从索引为多少开始,end_colx表示从索引为多少结束,
            # end_colx为None表示结束没有限制
            # 获取指定行中的数据并以列表的形式返回
            table_list = sheet.row_values(rowx=i, start_colx=0, end_colx=None)

标签:execl,vue,sheet,colx,上传,Django,file,data
From: https://www.cnblogs.com/chunyouqudongwuyuan/p/17175333.html

相关文章

  • 从0搭建Vue3组件库(三): 组件库的环境配置
    本篇文章将在项目中引入typescript,以及手动搭建一个用于测试组件库组件Vue3项目因为我们是使用Vite+Ts开发的是Vue3组件库,所以我们需要安装typescript、vue3,同......
  • npm vue-router安装报错
    因为2022年2月7日以后,vue-router的默认版本,为4版本,而且vue-router4,只能在vue3中,只有vue-router3中,能用在vue2中如果把vue-router4强制安装到vue2中,则会报上面的错误;解......
  • vue3 门户网站搭建8-字体
    浏览器默认的可选字体比较少,如果没有合适的则需要额外下载并引入。一般使用开源字体即可,商用需要花钱~ 将下载好的ttf格式字体放入项目下文件夹: 样式文件中增加......
  • vue3 门户网站搭建7-eslint
    为了方便阅读和维护,代码规范还是有必要的 1、安装:npmieslint--save-dev 2、配置 .eslintrc.cjs文件,增加rules:rules:{'semi':['warn','always'],......
  • vue3组件透传
    <template><divclass="empty-box"><el-emptydescription="暂无数据"v-bind="$attrs"><templatev-for="(item,key)in$slots"#[key]><slot......
  • vue打包后打开index.html文件显示空白页问题
    通过网上的资料发现在vue.config.js中写入再重新打包就可以再index.html中显示。https://blog.csdn.net/m0_51060602/article/details/123411536 ......
  • 在Vue中設置時間區間搜索
    vue:<a-col:md="5":sm="24"><a-form-item><a-range-picker:ranges='timeRange':de......
  • vue:v-bind
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></......
  • vue
    基础三部分:<template>视图  有且只有一个跟标签<view><script>思路代码<style>样式<template>  <view>    <view>当前标题{{title}}</view>   ......
  • #yyds干货盘点#vue3 语法糖setup 兄弟组件传值
    使用mitt//全局引入npminstallmitt或者cnpminstallmitt在main文件中挂载import{createApp}from'vue'importAppfrom'./App.vue'importmittfrom'mitt'//导......