实战：vue上传图片给PHP后台全过程（账户注册模块）

最新推荐文章于 2024-08-21 22:32:38 发布

Small盼盼

最新推荐文章于 2024-08-21 22:32:38 发布

阅读量7.4k

点赞数 2

分类专栏：论文文章标签： vue axios base64 php

本文链接：https://blog.csdn.net/qq_38086247/article/details/82229979

版权

本文介绍了一种使用Vue、Element UI和axios实现前端图片上传，结合PHP后台处理的实战方法。主要难点在于图片上传，前端借助vue-img-inputer组件展示图片，并转换为base64格式。PHP后台接收数据，定义存储路径和文件名，并将数据存入数据库，注意数据类型的匹配。

摘要由CSDN通过智能技术生成

注册窗口是用到的技术栈：前端vue、element，传输：axios 后台php
效果图：

本次开发主要的难点是注册时的图片上传，所以技术总价大部分关于图片上传的内容

上传逻辑思想

这里写图片描述

核心坑点1
前台图片显示是用现成组件：img-inputer（可以用npm直接安装在vue项目中）连接：https://github.com/waynecz/vue-img-inputer
这个组件能获取上传图片，然后自动在页面显示出来。组件的双向v-model=”file”，可以在组件外绑定空file对象，由此拿到该对象就可转换为base64格式数据了，转换如下：

//绑定组件数据
<img-inputer v-model="file1" theme="light" size="5px" type="file" accept="image/*" placeholder="请上传驾驶证正面！" :on-change="chooseImg" />

//在methods中
 chooseImg () {          //上传照片时将图片转为base64

          let file = this.file1   //file1是绑定的file对象
          let reader = new FileReader()
          let img = new Image()
          // 读取图片
          reader.readAsDataURL(file)
          // 读取完毕后的操作
          reader.onloadend = (e) => {
            img.src = e.target.result
            // 这里的e.target就是reader
            // console.log(reader.result)
            // reader.result就是图片的base64字符串
            this.ruleForm1.base1 = reader.result
          }

        },
        //将数据post给后台：
          axios.post('/api/test01/register.php',{
            num: this.ruleForm1.num,
            name: this.ruleForm1.name,
            code: this.ruleForm1.code,
            driverNum: this.ruleForm1.driverNum,
            pass: this