django+vue+elementui(upload)：实现文件上传

前端

elementui的upload：

<el-upload
class="avatar-uploader"
:action="img_url"
:show-file-list="false"
 :on-success="handleAvatarSuccess"
 :before-upload="beforeAvatarUpload">
 <img v-if="img_url" :src="img_url" class="avatar"
  style="height: 80px;width:80px;border-radius: 10px">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
 

前端的js

data () {
    return{
        img_url:'',//显示原来的头像url，可以在mounted钩子上从后端获取数据，这里就不体现了。
        
}

},

methods:{
//自带的钩子函数，前端拿到文件后就会自动触发该函数，我们在这个函数中发起axios请求传递文件
handleAvatarSuccess (res, file) {
        this.img_url = URL.createObjectURL(file.raw)
        this.file_img = file.raw
        var formdata = new FormData()
        formdata.append('icon', file.raw)
        this.$axios({
          url: this.$settings.base_url + '/user/personupdate/',
          method: 'patch',
          data: formdata
        }).then(res => {
          if (res.data.code === 100) {
            this.$message.success('头像更换成功')
            this.get_icon()
          } else {
            this.$message.error('头像更换失败')
          }
        })
      },
        //文件上传到前端系统前，会调用的钩子函数，主要对上传的文件进行限制
      beforeAvatarUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2
        this.$message.warning(('文件上传中'))
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      },
      

}                         

后端主要代码

序列化器：

class PersonIconViewSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.User
        fields=["icon"]
    def validate(self, attrs):
        id = self.context.get('id')
        request = self.context.get('request')
        file = request.FILES.get('icon')
        try:
            user = models.User.objects.get(id=id)
            user.icon=file
            user.save()
            return attrs
        except Exception as e:
            raise ValidationError(str(e))

视图函数：

class PersonCenterUpdateview(GenericAPIView,ViewSetMixin):
    #个修改头像
    def patch(self,request):
        ser =serializers.PersonIconViewSerializer(data=request.data,context={'id':request.auth.get('id'),'request':request})
        if ser.is_valid():
            return ApiResponse(code=100)
        return ApiResponse(code=500, error=ser.errors)

    #给前端头像的url
    def get(self,request):
        user = models.User.objects.get(id=request.auth.get('id'))
        ser = serializers.PersonIconViewSerializer(instance=user)
        return ApiResponse(code=100,data=ser.data)