vue圖片上傳

今天來跟大家分享一下vue圖片上傳，以及一些樣式的設計

如圖是一個上傳按鈕，當上傳成功后按鈕被上傳的圖片縮略圖替代

效果

=》

 

代碼

 

　　　　　//elementui按鈕

　　　　　　　　　<el-button
 2               class="fileParent"
 3               type="success"
 4               icon="el-icon-plus"
 5               style="background:#273C48"
 6               @change="uploadFile"
 7             >
 8               <input class="file" type="file" @change="uploadFile" multiple="multiple" />//上傳框
 9               <img :src="tempImg" v-if="tempImg" alt />//縮略圖
10             </el-button>

 

 

 async uploadFile(event) {  2       let file = event.target.files[0]; //獲取input的圖片file值
      let param = new FormData(); // 創建form對象
      param.append("imgFile", file); //對應后台接收圖片名
      await uploadPicture(param).then(res => {//uploadPicture為我的api接口  6         if (res.code == 1) {  7           let url = res.url[0].url;  8           this.tempImg = "online" + url;  9  } 10  }); 11       this.$notify({ 12         duration: 3000, 13         title: "成功", 14         message: "上傳成功！", 15         type: "success"
 }); 17     }

 

 //css樣式在這里

.fileParent {
  position: relative;
  img {
    position: absolute;
    width: 60px;
    height: 39px;
    left: 0;
    top: 0;
  }
}
.file {
  position: absolute;
  left: 0;
  opacity: 0;
}

 

實際的框框是這樣的