vue + drf 图片上传案例

vue + drf 图片上传案例

前端

vue+element-plus组件库

前端用到组件库的el-upload组件，主要对组件的熟悉及使用，这里做关键属性使用介绍

• 属性：
  1. action: 请求 URL , ————也是后端drf的请求接口
  2. name: 上传的文件字段，————后端可通过request.data.get('pic_path') 获取
  3. show-file-list: 是否显示已上传文件列表
  4. before-upload: 上传文件之前的钩子函数， 常用于上传前校验类型/大小等————如下代码
  5. on-success：文件上传成功时的钩子， 常用于动态渲染成功的图片————如下代码

<template>
    <el-upload
        class="avatar-uploader"
        action="http://127.0.0.1:8001/bs_api/users/upload_pic/"
        name="pic_path"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        :on-success="handleAvatarSuccess"
    >
        <img v-if="pic_path" :src="pic_path" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
</template>

<script lang="js" setup>
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'

const pic_path = ref('')

// 上传前文件约束函数
const beforeAvatarUpload = (rawFile) => {
    if (
        rawFile.type == 'image/jpeg' ||
        rawFile.type == 'image/png' ||
        rawFile.type == 'image/gif'
    ) {
        if (rawFile.size / 1024 / 1024 > 2) {
            ElMessage.error(' 头像图片大小必须小于2MB!')
            return false
        }
        return true
    } else {
        ElMessage.error('图片格式必须为jpg|png|gif格式')
        return false
    }
}

// 上传成功
const handleAvatarSuccess = (response, uploadFile) => {
    // 得到后台返回的url地址pic_path
    pic_path.value = response.data.pic_path
}
</script>

后端

使用Djangorestframework

后端保存图片需要处理的几个事情，本实例新创建一个模型类：

1. 配置图片存储路径及url生成方式

# settings.py

# 文件上传保存路径 # 根据自己喜好变更
MEDIA_ROOT = os.path.join(BASE_DIR.parent, 'media') 
# 文件的网络url路径  # 根据自己喜好变更
MEDIA_URL = 'media/'  # 会生成这样的url———— 主机地址：端口号/media/xxxxxx ， 供外部访问

2. 创建模型类

class PictureInfo(models.Model):
    pic_path = models.ImageField(verbose_name='用户头像路径') 

3. 创建序列化

class PictureInfoSerializer(serializers.ModelSerializer):
    class Meta:
        model = PictureInfo
        fields = ['pic_path']

4. 图片上传url接口

from rest_framework.routers import DefaultRouter
from . import views

router = DefaultRouter()
router.register('upload_pic', views.PictureInfoViewSet, basename='用户头像上传接口')
urlpatterns = []
urlpatterns += router.urls

5. 视图图片处理

from apps.users.serializers import PictureInfoSerializer
from apps.users.models import PictureInfo


class PictureInfoViewSet(ModelViewSet):
    queryset = PictureInfo.objects.all()
    serializer_class = PictureInfoSerializer

    def create(self, request, *args, **kwargs):
        # 'pic_path' 为前端el-upload组件的属性name: 上传的文件字段
        print('前端图片pic_path', request.data.get('pic_path'))  
        result = super().create(request, *args, **kwargs)
        print('生成的图片url:', result.data)
        # 生成的图片url: {'pic_path': 'http://127.0.0.1:8001/media/wx_fcUlvap.png'}  # 这个url 跟settings里的 MEDIA_URL = 'media/'关联
        return Response({'code': 200, 'message': '成功', 'data': result.data})

6. 配置访问图片的url（这个与普通url有区别）

要外部访问生成的图片url：http://127.0.0.1:8001/media/wx_fcUlvap.png`,需要配置访问图片的url路径

该步骤设置完毕后，即可在网页访问url展示图片了

from django.urls import path, include
from django.conf.urls.static import static
from django_drf_api.settings import dev

urlpatterns = [
    #    path('admin/', admin.site.urls),
] + static(dev.MEDIA_URL, document_root=dev.MEDIA_ROOT)

7. 访问展示：