【Django+vue3】上传和显示图片

原创

已于 2023-12-04 17:30:20 修改 · 2.9k 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#django #后端 #vue.js #python #elementui

于 2023-11-26 23:29:24 首次发布

文章介绍了使用Django和Vue3开发项目时，处理用户图片上传和显示的具体步骤，涉及前端组件配置、后端数据处理和URL路由设置。

最近在学习使用django和vue3写一个前后端项目，在上传用户图片这边卡了好一会儿，网上找了好多资料，最后还是自己总结了一点经验，分享给大家。

我在前端使用的是Element plus的el-upload组件上传图片，后端用户的头像字段采用的是ImageField类型。 ImageField是Django数据库的一种数据类型，varchar类型，通常用来保存图片的名称，而想要了解el-upload具体有哪些属性可以参考：Upload 上传 | Element Plus。

两者具体怎么用看下面的流程。

一、前端代码

首先，上传头像需要用到前端的el-upload组件，如以下代码：

<!-- 这里的uploadUrl是http://127.0.0.1:8000/media/upload/uploadAvatar -->
<el-upload
    :action="uploadUrl"
    :auto-upload="true"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
 >
    <img
       v-if="imageUrl"
       :src="imageUrl"
    />
    <i v-else></i>
</el-upload>

其中，action规定了上传头像对应的url，这是一会儿要和后端对应上的；auto-upload是自动上传；on-success是上传成功后的操作，而before-upload规定了上传前的操作，通常用来判断图片格式、大小是否满足要求。这里在el-upload里面放了一个img标签，用来显示图片，当imageUrl能从后端请求到图片时就显示图片，否则显示一个空的链接。

下面是我在methods中规定的on-success和before-upload对应的行为：

// 上传成功后进行数据处理
handleAvatarSuccess(res) {
  // 显示上传是否成功
  if (res.code == 0) {
     this.$message.success(res.msg);
  } else {
     this.$message.error(res.msg);
  }
  // 规定新的imageUrl为 <"http://127.0.0.1:8000/media/user/"+文件名>
  this.imageUrl = "http://127.0.0.1:8000/media/user/" + res.file;
  // 更新user的photo字段值
  this.user.photo = res.file;
},

// 上传前判断图片大小是否满足要求
beforeAvatarUpload(file) {
  const isLt10M = file.size / 1024 / 1024 < 200;
  if (!isLt10M) {
     this.$message.error('