vue2+element UI +django上传文件

最新推荐文章于 2024-10-11 16:44:14 发布

大霞上仙

最新推荐文章于 2024-10-11 16:44:14 发布

阅读量231

点赞数 3

分类专栏： vue Django 文章标签： ui django vue.js

本文链接：https://blog.csdn.net/daxiashangxian/article/details/142056036

版权

vue 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

Django

22 篇文章 0 订阅

订阅专栏

前端

<template>
    <div>
         <el-container style="height:100%;">
   
               <el-container>
                  <el-main >
                      <el-row :gutter="20">
                          <el-col :span="8"><div class="grid-content bg-purple-light">
                              <span>点击打开<el-button type="text" @click="dialogFormVisible = true"> 新增语料</el-button>
                                        即可创建属于您的语料库！
                                        </span>
                              </div>
                          </el-col>
                          <el-col :span="8"><div class="grid-content bg-purple">
                          </el-col>
                          <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>

                      </el-row>
                      <el-dialog
                          title="新增语料"
                          :visible.sync="dialogFormVisible"
                          width="40%">
                            <el-form ref="form" :model="form" label-width="150px">
                                 <el-form-item label="语料文件名称">
                                    <el-input v-model="form.filename" autocomplete="off" placeholder="请输入语料文件名称" ></el-input>
                                 </el-form-item>
                            </el-form>
                            <el-upload
                                  class="upload-demo"
                                  :data="{key:this.form.filename}"
                                  drag
                                  :before-upload="onBeforeUpload"
                                  :on-success="handleSuccess"
                                  :on-error="handleError"
                                  action="/add_yuliao/"
                                  multiple>
                                  <i class="el-icon-upload"></i>
                                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                  <div class="el-upload__tip" slot="tip">只能上传txt文件，且不超过500kb</div>
                            </el-upload>

                      </el-dialog>
                      
                      <br>
                      <br>

                   </el-main>
               </el-container>
         </el-container>
    </div>
</template>

<script>
    import axios from 'axios'

    export default{
        name:"YuLiao",
            data() {
                     return {
                        dialogFormVisible:false,
                        formLabelWidth:'120px',
                       
                        form: {
                            filename:'',
                        },


                     }
            },

            methods:{

                onBeforeUpload(){
                    if (this.form.filename === '') {
                        alert('请输入语料库名字！');
                        return false
                    console.log('可以上传')
                    return true
			        }
                },
                handleSuccess(response, file, fileList) {
                  alert('语料上传成功')
                  location.reload()
                  console.log('语料上传成功');
                },
                handleError(err, file, fileList) {
                  alert('语料上传失败')
                  location.reload()
                  console.error('语料上传失败');
                },
               
               
             // methods关闭
             },
            
    }
</script>

路由

path('admin/', admin.site.urls),
path('', TemplateView.as_view(template_name='index.html')),
path('add_yuliao/', add_yuliao),  # 添加语料库

后端

def add_yuliao(request):
    data = {}
    for i in request.POST.lists():
        data[i[0]] = i[1][0]
    myFile = request.FILES.get('file')
    now = datetime.now()
    filename = data['key'] + str(now)[:-10].replace(' ', '_').replace(':', '') + '.txt'
    file_path = os.path.join(settings.YULIAO_ROOT, filename)
    # print('here',file_path)
    fp = open(file_path, 'wb+')
    # print(fp)
    for i in myFile.chunks():
        # print(i)
        fp.write(i)
    fp.close()
    DB_yuliao.objects.create(name=data['key'], user=request.user.username, filename=filename)
    return get_yuliaolist(request)

model

class DB_yuliao(models.Model):
    name = models.CharField(max_length=50, null=True)  # 语料名字
    user = models.CharField(max_length=15, null=True)  # 语料创建者名字
    ctime = models.DateTimeField(auto_now=True)
    filename = models.CharField(max_length=1000, null=True)

    def __str__(self):
        return str(self.name) + str(self.ctime)