众所周知，在很多项目中，特别是关于商品管理类的新增功能中，都会带有新增图片的功能，上传图片是很多前端小白的噩梦，接下来我们就来讲一下上传图片的流程，以及详细代码  

# 上传图片

## 常见的图片上传的方式有两种（引用第三方组件上传，自己封装组件上传，封装的凡是有很多，我们以element-ui中的组件讲解）

~~~

    点击上传图片，将自己的图片传到form表中，但是form表单是不能直接提交图片的，我们需要在图片上传成功后返回的一个“字段”，将这个“字段”作为form表单的字段放在form表单中，提交就可以实现整个新增功能。

重点：一定是要将获取到图片上传成功之后的回显，放在form中，提交新增商品的表单才能生效！！！！

步骤：

    1、打开第三方组件库（以element-ui库为例）

    2、找到自己需要的使用的组件类型

    3、复制里面的代码并粘贴在自己项目中需要展示的位置

    4、调用接口

    5、在上传成功的钩子中，拿到回显（上传完图片，服务器返回来的数据）

    6、将拿到的回显绑定到form表单中需要上传的那个字段上

    7、提交，完成新增功能

~~~

#### 详细步骤

~~~

1、找到element-ui组件库官网，并找到自己需要的upload组件类型，这里以照片墙的为例，如图1所示。

2、将组件内的代码复制到自己自己项目中需要的位置，如图2所示。

          <el-form-item label="商品主图" prop="mainImage">   //label标签为，这一项展示前面的文字；  prop标签是在展示列表时，用于获取接口内数据的。

            <el-uploa action="https://jsonplaceholder.typicode.com/posts/"     //action后面填写后端给的上传图片接口地址

              list-type="picture-card"     //list-type后面是上传图片的类型，这个是照片墙类型，当然还有上传头像和其他的类型

              :on-preview="handlePictureCardPreview"     //点击预览的的钩子函数

              :on-remove="handleRemove"     //删除的钩子函数

              :header="headers"     //这是请求头，自己的后端需要什么样的请求头，就在data中写什么请求头，或者直接在headers这个位置写请求头，图示是我们需要的请求头，至于token怎么获取，就看你项目中的token怎么获取的，方法为：导入getToken（）所在的文件加，然后掉用即可，一般在utils下的auth.js中

              :on-success="handleSuccess"     //这一项是我们必须要加的，即图片上传成功的钩子函

数，我们需要在methods中写下方法并打印里面的response如图3，在上传成功后，会在控制台打

印后端返回的一个"url"或者其他的字段（这个字段是后端在提交"新增"这个form表单时需要的字段

可以和后端联调一下，看具体需要哪个字段）这个字段有两种：一种是字符串，一种是路径，尽量

和后端两天让他返回一个字符串，拿到数据直接绑定在表单中提交就行了，否路径的话还要再发一

次请求，我控制台的打印的数据以我后端给的参数为准，如图4

>

              <i class="el-icon-plus"></i>  //图标

            </el-uploa>

            <el-dialog :visible.sync="dialogVisible">     //布尔值，是否展示

              <img width="100%" :src="dialogImageUrl" alt="" />     //图片的路径，拿到数据后赋值过来即可

            </el-dialog>

          </el-form-item>

图3：

 图4：

 3、最后将获取到的回显，赋值form表单中向相应的的字段如图5，

在点击新增按钮的时候提交表单即可。

图5 ：

~~~

### 完结