最近做一個項目，關于用戶數(shù)據(jù)和表單上傳的項目，碰到了不少坑，這里總結的分享給大家，希望能夠幫助大家。（小白，歡迎大家多交流）

多的就不說了，直接來代碼吧！！

1、上傳組件
說明一下，項目是基于vue框架的

<template>  <div class="newproduct">        <div class="topbox">       <div class="shopbox">             <img class="shopicon" src="../../assets/head.jpg">        <p class="shopname">開心就好的小店</p>      </div>    </div>    <div class="goodsbox">      <div class="startleft namebox">        <label class="title">商品名稱：</label><input class="noborder" v-model="goodsname" placeholder="請輸入商品名稱">      </div>      <div class="startleft goodstypebox">        <label class="title">商品類型：</label>        <select v-model="goodstype">          <option value="請選擇">請選擇</option>          <option value="圖書">圖書</option>          <option value="卡券">卡券</option>          <option value="服裝">服裝</option>          <option value="禮品">禮品</option>          <option value="運動裝備">運動裝備</option>          <option value="電子設備">電子設備</option>          <option value="日用百貨">日用百貨</option>          <option value="其他">其他</option>        </select>      </div>            <div class="startleft describebox">        <label class="title">商品描述</label>             </div class="startleft">       <textarea class="describeinfo" v-model="goodsinfo"></textarea>      <div class="startleft">        <label class="title">單價:</label>        <input class="noborder" placeholder="請輸入單價" v-model="price">      </div>      <div class="startleft">        <label class="title">數(shù)量:</label>        <input class="noborder" placeholder="請輸入數(shù)量" v-model="number">      </div>      <div class="startleft">        <label class="title">聯(lián)系電話:</label>        <input class="noborder" placeholder="請輸入手機號" v-model="phone">      </div>      <div class="startleft">        <label class="title">地址:</label>        <input class="noborder" placeholder="請輸入地址" v-model="address">      </div>      <div class="startleft">        <label class="title">圖片</label>        <img src="">        <img src="">            </div>            <div class="addimg">        <div class="imgbox">          <img class="goodsimg" src="../../assets/addimg.png">          <input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/>        </div>        <div class="imgbox">          <img class="goodsimg" src="../../assets/addimg.png">          <input type="file" class="fileupload" accept="image/*" capture="camera" @change="viewimg()"/>        </div>       </div>    </div>    <div class="bottombox" :style="{'top':(height-12) + 'px'}">      <ul class="bottommenu">        <li class="item" @click="backHome()">首頁</li>        <li class="item" @click="backShop()">返回貨架</li>        <li class="item border">放棄編輯</li>        <li class="item" @click="uploadtest()">上架</li>      </ul>    </div>    <div class="fillbottom"></div>  </div></template>