VUE 使用el-upload上传图片到Django

这里我们主要是借助element-ui中的el-upload来上传图片的

下面是前端的代码

<el-form-item label="logo图片" prop="logo">

          <el-upload

            :action="host + '/brand/logo/'"

            :auto-upload="true"

            :on-success="uploadSuccess"

          >

            <el-button size="small" type="primary">点击选择图片</el-button>

          </el-upload>

        </el-form-item>

这里用到了里面的三个参数//具体可以参考官方文档组件 | Element

action:上传的地址    会向该地址发送一个post请求

auto-upload:是否在选取文件后立即进行上传   是一个布尔值  true/false

on-success:文件上传成功时的钩子

 图片在上传后

后端要进行一些处理

定义一个视图 接收post请求

获取前端传来的文件对象  使用    file = request.data.get("file")

        # file.file  上传文件的字节流
        # file.name  上传文件的名字
 

下面用到了一个静态文件 用来存储上传的图片

可以参考下面这篇文章

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kun_ers/article/details/124326953
————————————————
版权声明：本文为CSDN博主「kun_ser」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kun_ers/article/details/124326953

from rest_framework.views import APIView
from django.conf import settings
import os


class UploadLogoView(APIView):
    def post(self, request):
        # 获取文件对象
        file = request.data.get("file")
        # file.file  上传文件的字节流
        # file.name  上传文件的名字

        # 拼接路径
        # static_path : 该路径前后不能有斜杠  对拼接有影响
        static_path = "static/images/logos"
        # 将静态资源文件夹拼接到项目根目录
        file_path = os.path.join(settings.BASE_DIR, static_path)
        # 拼接图片名称
        file_name = os.path.join(file_path, file.name)
    
        # 保存图片
        # wb  以二进制形式写入
        with open(file_name, "wb") as f:
            # 写入字节流
            f.write(file.file.read())

        # 返回响应
        data = {
            "code": 200,
            'msg': "上传图片成功",
            'static_path': static_path,
        }
        return Response(data)

wb  : w是写入     b 是二进制   read()  读取

返回的响应中需要有静态文件夹的一个  接口 

        # static_path : 该路径前后不能有斜杠  对拼接有影响
        static_path = "static/images/logos"

 然后回到前端

在methods中定义一个uploadSuccess方法

对这个静态文件的路径进行拼接处理  赋值给 logo,在发送添加或者修改的请求时 ,将数据发送到服务器,并保存到数据库

files.name:  文件名

    uploadSuccess(res, files) {

      this.BrandsForm.logo = "/" + res.static_path + "/" + files.name;

    },

 最后如果想要展示图片的话可以使用img标签,绑定一下路径

例如:

<img :src="host + BrandsForm.logo" width="102" />

# host是服务器的地址

# BrandsForm.logo是从数据库中获取到的图片路径