Vue+Django之图片上传篇

之前在项目中也遇到过这个问题,当时解决办法比较笨重且不方便,胡乱配置.现在做项目有遇到这个问题了,因为觉得之前的方法实在不好,所以又重新找方法解决了.记录下也分享给遇到同样问题的小伙伴!

在项目中,图片上传并附带几个参数的场景非常常见,如果技术栈是Vue+Django的小伙伴就一定会遇到这个需求.

前端部分(Vue)

页面部分

<template>
  <div class="container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="商品名称">
        <el-input v-model="form.goods_title" placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="form.goods_price" placeholder="请输入商品价格"></el-input>
      </el-form-item>
      <el-form-item label="商品分类">
        <el-input v-model="form.goods_kind" placeholder="请输入商品分类"></el-input>
      </el-form-item>
      <el-form-item label="商品图片">
        <input type="file" @change="getImageFile" id="img">
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认添加</el-button>
        <el-button type="success">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

JS部分

<script>
  export default {
    name: 'AddGoods',
    data() {
      return {
        form: {
          goods_title: '',
          goods_price: '',
          goods_image: '',
          goods_kind: '',
        },

      }
    },
    methods: {
      getImageFile:function(e) {
        let file = e.target.files[0];
        this.form.goods_image = file;
      },
      onSubmit() {
        let formData = new FormData();
        formData.append('goods_title', this.form.goods_title);
        formData.append('goods_price', this.form.goods_price);
        formData.append('goods_kind', this.form.goods_kind);
        formData.append('goods_image', this.form.goods_image);
        this.$axios.post('http://127.0.0.1:8000/addNewGoods/', formData).then(res => {
          console.log(res);
        }).catch(err => {
          console.log(err);
        })
      }
    }
  }
</script>

注意:

1.axios在传递数据时格式默认时json,而后端接收数据一般都是FormData,所以使用axios请求时,一般会配套使用另一个库qs,但大家发现这里并没有使用,这是因为如果使用qs序列化后,那么文件数据后端将无法接收,所以需要使用FormData去进行数据交互.(FormData的用法小伙伴们可以自行百度)
2.在图片文件选择时我选择了原生的input,elementUI的input也有文件输入的,但是它针对的文件上传需要有单独的接口,所以我选择原生的.

后端(Django)

views.py

def addNewGoods(request):
    print(request.FILES)
    goods_image = request.FILES.get('goods_image')
    goods_title = request.POST.get('goods_title')
    goods_price = request.POST.get('goods_price')
    goods_kind = request.POST.get('goods_kind')
    goods_id = str(time.time()).replace('.', '')

    goods_obj = GoodsList.objects.create(goods_id=goods_id, goods_title=goods_title, goods_price=goods_price,
                                         goods_kind=goods_kind, goods_image=goods_image, goods_order_num=0)
    goods_obj.save()

    data = jsonResult.json_result(message="添加成功", result="success", data=[], form_data={})

    return HttpResponse(data)

models.py(写出最重要的部分)

goods_image = models.FileField(blank=True, null=True, upload_to='goods', verbose_name='商品图片')

settings.py
在settings.py添加如下配置,我们将用户上传的文件存储到media文件夹中.

MEDIA_URL = '/media/'

MEDIA_ROOT = (
    os.path.join(BASE_DIR, 'book_shop/media')
)

urls.py(相关引入配置可自己完成)

urlpatterns = [
	# .....
    re_path(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT})

]

好了,到这前后端部分就都完成了,接着可以进行测试.
(此处跳过测试过程…)
奉上结果图


文件成功存入!
再试试能不能访问

成功访问,开心😄!

本篇文章到这就结束了,希望能够给需要的小伙伴带来帮助,同时若本文章有错误地方,欢迎大家指出,多多交流💪