h5图片上传功能（ ）

最近在写车辆管理的H5页面，遇到图片上传功能，发现移动端没有合适的框架实现上传图片。  咱们都知道，html5中有个input type=file元素。用该元素能够实现页面上传文件的功能！！！

如今咱们来研究一下：

首页静态页面 

html:

 <div class="remark">
      <span style="display: block;">备注照片：</span>

      <div class="upImg">
        <img :src="remarkimg" alt="" class="upload">
        <img src="@/assets/shut.png" alt="" class="del" @click="delRemark" v-show="remarkimg != ''">
      </div>

      <div class="upload_box" v-show="remarkimg == ''">
        <img src="@/assets/upload.png" alt="">
        <input type="file" @change="remarkPicture($event)" accept="image/*">
      </div>
    </div>



css样式：

 .remark {
      padding: 30px 30px 30px 0;
      font-size: 32px;
      margin-left: 30px;
      border-bottom: 2px solid #ccc;
      font-weight: 600;
      textarea {
        display: block;
        margin: 20px 0 0 80px;
        width: 610px;
      }
      .upImg {
        display: inline-block;
        position: relative;
        .upload {
          width: 152px;
          height: 152px;
          margin-top: 20px
        }
        .del {
          width: 40px;
          height: 40px;
          position: absolute;
          top: 0px;
          right: -20px;
          z-index: 999;
        }
      }
      .imgLis {
        display: inline-block;
      }
      #upload {
        width: 152px;
        height: 152px;
        margin-top: 20px
      }
      .upload_box{
        // margin-top: 20px;
        display: inline-block;
        vertical-align: top;
        position: relative;
        img {
          width: 152px;
          height: 152px;
          margin-top: 20px
        }
        input {
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          width: 152px;
          height: 152px;
        }
      }

点击+  选择图片触发@change="remarkPicture($event)"事件 

console.log(e.target.files[0])打印出的值

 

应后台接口须要 参数 service  file  userId :如图

因此我把须要的参数经过append的方法追加到formData中，而后将值传到后台，而后后台处理，获取图片连接（res.data）

 

 

前面咱们说到了formData  

FormData的主要用途有两个：

一、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减小表单元素的拼接，提升工做效率。

二、异步上传文件

 咱们主要使用的是：

//经过FormData构造函数建立一个空对象
var formdata=new FormData();
//能够经过append()方法来追加数据
formdata.append("name","laotie");

图片上传后的页面：