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");

圖片上傳後的頁面：