首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >Django实现文件图片的上传

Django实现文件图片的上传

作者头像
一写代码就开心
发布2022-05-16 08:16:38
发布2022-05-16 08:16:38
1.2K0
举报
文章被收录于专栏:java和pythonjava和python

目录

1 需求

2 实现

2.1 前端

2.2 后端

3 案例

3.1 前端vue

代码语言:javascript
复制
    <el-form-item label="静息影像:">
       <el-upload
       :show-file-list=false
        action="你的URL"      
        :auto-upload="true"
        :data="uploadData"
        :http-request="imageChange"
        :beforeUpload="beforeAvatarUpload"    
          accept=".gif,.jpg,.jpeg,.png,.GIF,.JPG,.PNG"
    >
      <el-button type="danger" class="buttons2">上传文件</el-button>
    </el-upload>    
     </el-form-item>    




<script>
const axios = require('axios');
export default {
  data() {
    return {
       uploadData:{
        pic:{},//上传的图片
        username:'',//携带的参数ID
      },




 // 提交图片
    imageChange(param,type,file){
      let formData = new FormData()
      formData.append('tpmc', "静息影像");
      formData.append('path', "jxyx");
      formData.append('pic', param.file);
      formData.append('username', this.uploadData.username);
      var mm=this
      this.$axios.post('http://127.0.0.1:8000/addtp/',formData).then((res) => {
                          console.log(res.data);
                          var me = mm
                          if(res.data.code==200){
                                 me.$message.success('上传成功')
                         }
  
     })

3.2 后端

代码语言:javascript
复制
def addtp(request):

    if request.method == 'POST':
        iddd = request.FILES.get('pic', '') #
        tpmc = request.POST.get('tpmc', '')  #
        print(tpmc)
        path = request.POST.get('path', '')  #
        username = request.POST.get('username', '')  #

        hztp1 = hztp()
        hztp1.realname=username
        hztp1.tplb = tpmc
        hztp1.image=iddd
        hztp1.save()

        data = {
            "code": 200,
            "data": '新增成功'

        }
        resp = JsonResponse(data)
        return resp
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 目录
  • 1 需求
  • 2 实现
    • 2.1 前端
    • 2.2 后端
  • 3 案例
    • 3.1 前端vue
    • 3.2 后端
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档