diango-vue项目-前端上传tif文件并在后端保存

直接上代码

前端:

<template>
    <div>
        <el-upload
  class="upload-demo"
  :action="uploadURL"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :on-change="handleChange"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        // 图片要传到服务端的哪里(路由=process.env.VUE_APP_BASE_API+你要传图片的接口)
        uploadURL:process.env.VUE_APP_BASE_API+"/WindAnalysis/tifWA/",

        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }`);
      }
    }
  }
</script>

后端

import os
import json
import time
from django.conf import settings


# Create your views here.
from django.http import JsonResponse, response, HttpResponse, StreamingHttpResponse


def tifWA(request):
    result = []
    if request.method == 'POST':
        print("函数已触发")
        tif = request.FILES.get('file')  # 至于为什么这里的接收名称位file,我忘了。。。。
        print(tif)
        base_dir = settings.BASE_DIR  # 当前的最高级目录(dvadmin-backend)
        timestrap = str(time.time())
        upload_dir = os.path.join(base_dir, 'media', 'Tifs')  # 在主目录下新建文件夹
        print(upload_dir)

        path = os.path.join(upload_dir, tif.name)  # 把前端传过来的图片保存在新建的upload文件夹中
        print(path)
        with open(path, 'wb+') as f:
            for chunk in tif.chunks():
                f.write(chunk)
    return JsonResponse(result)

这代码由于result没有值,所以会报个小错误,不要紧哈

结果

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Python-Django-Vue项目实战是一种常见的全栈发模式,结合了Python的Django框架和Vue.js前端框架。下面是一个简单的介绍: Python-Django是一个强大的Web开发框架,它使用Python语言编写,提供了一系列的工具和库来简化Web应用程序的开发过程。Django具有高度的可扩展性和灵活性,可以帮助开发者快速构建功能丰富的Web应用。 Vue.js是一个流行的JavaScript前端框架,它专注于构建用户界面。Vue.js具有简单易学的语法和强大的功能,可以帮助开发者构建交互性强、响应迅速的前端应用。 在Python-Django-Vue项目实战中,通常会将Django作为后端框架来处理数据逻辑和业务逻辑,而Vue.js则负责前端页面的展示和用户交互。通过这种方式,可以实现前后端分离,提高开发效率和代码可维护性。 具体的项目实战可以包括以下内容: 1. 构建Django后端:使用Django框架创建后端应用程序,包括定义数据模型、编写视图函数、配置URL路由等。 2. 开发Vue前端:使用Vue.js框架创建前端应用程序,包括设计页面布局、编写组件、处理用户交互等。 3. 数据交互:通过RESTful API或GraphQL等方式,实现前后端数据的交互和通信。 4. 用户认证和权限管理:实现用户注册、登录、权限验证等功能,确保系统的安全性。 5. 数据库操作:使用Django的ORM(对象关系映射)来进行数据库操作,包括增删改查等。 6. 页面美化和响应式设计:使用CSS和Vue.js的样式绑定功能,实现页面的美化和响应式设计。 7. 部署和发布:将项目部署到服务器上,并进行性能优化和安全加固。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值