Element-ui实现图片与内容同时上传

Element-ui实现图片与内容同时上传

前端html

<el-upload
                      class="avatar-uploader"
                      action="#"
                      :http-request="uploadFile" # 上传方法
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess" # 执行成功执行方法
                      :on-change="handleChange" # 图形改变执行方法以实现图形展示
                      :auto-upload="false"
                      :multiple="false"
                      ref="uploadExcel"
                      :before-upload="beforeAvatarUpload"
                      >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-user avatar-uploader-icon"></i>
</el-upload>

前端vue

methods: {
      uploadFile(param){
        this.img_file = param.file
      },
     handleChange(file, fileList) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      # 内容提交img_file  一同提交
      onSubmit() {
        this.$refs.uploadExcel.submit();
        this.formData = new FormData();
        this.formData.append('id', this.user_id);
        this.formData.append('user_name', this.userinfo.user_name);
        this.formData.append('sex', this.userinfo.sex);
        this.formData.append('sign', this.userinfo.sign);
        this.formData.append('e_mail', this.userinfo.e_mail);
        this.formData.append('address', this.userinfo.address);
        this.formData.append('img_file', this.img_file);
        console.log(this.img_file)
        this.$put(this.API.API_SET_USER, this.formData).then(res => {
          if(res.code==200){
            this.$message({
              message: '设置成功',
              type: 'success'
            });
          }else{
            this.$message.error('设置失败');
          }
        })
      },
      # 验证图片
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;

      },
   }

后端django

    def put(self, request):
        """更新用户信息"""
        query_params = request.data
        user_id = query_params.get('id')
        password = query_params.get('password')
        img_file = query_params.get('img_file')
        if password == '':
            return response_failure(code=400, message='密码不能为空')
        try:
            user_info = User.objects.filter(id=user_id).first()
            if user_info:
                s_data = {
                    'id': request.data.get('id'),
                    'user_name': query_params.get('user_name') if query_params.get('user_name') else '',
                    'sex': query_params.get('sex') if query_params.get('sex') else '',
                    'sign': query_params.get('sign') if query_params.get('sign') else '',
                    'e_mail': query_params.get('e_mail') if query_params.get('e_mail') else '',
                    'address': query_params.get('address') if query_params.get('address') else ''
                }
                if img_file:
                    s_data['icon'] = img_file
                serializer = UserSerializer(user_info, data=s_data)
                if serializer.is_valid():
                    serializer.save()
                else:
                    return response_failure(code=400, message='保存数据失败')
            else:
                return response_failure(code=400, message='没有该用户id')
        except Exception as e:
            raise e
        return response_success(code=200)