``` 上傳組件 <!-- 圖片上傳組件 action:提交地址；on-preview：預覽事件--> <!-- on-remove：處理移除圖片事件 --> <!-- heads:請求頭信息，上傳需要有token值 --> <!-- on-success:監聽圖片上傳成功 --> <!-- multiple：可以上傳多個 --> <!-- limit：限制上傳個數 --> <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" :headers="headsObj" :on-success="handleSuccess" multiple :limit="3" > <el-button size="small" type="primary">點擊上傳</el-button> <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div> </el-upload> <!-- 圖片預覽對話框 --> <el-dialog title="圖片預覽" :visible.sync="previewVisible" width="50%"> <img :src="previewPath" width="100%"> </el-dialog> data數據： //添加表單數據 addForm:?{ goodsname:"", goodsprice:0, goodsweight:0, goodsnum:"", //?商品分類數組 goods_cate:?[ ], //上傳成功的圖片 pics?:?[ ], //商品詳情描述 goods_instroduce?:'' ??}, //請求頭獲取： //?圖片上傳組件的請求頭對象 headsObj?:?{Authorization:window.sessionStorage.getItem("token")}, //圖片預覽保存的url路徑 previewPath?:'', //圖片預覽對話框 previewVisible:false, <script> //圖片上傳成功事件，上傳成功，后端返回文件名和臨時路徑,respone是返回的對象 handleSuccess(respone){ console.log(respone) //?1.拼接一個圖片信息對象 //?tmp_path為后端返回的臨時路徑名稱 const picinfo?=?{pic?:respone.data.tmp_path} //?2.將圖片信息push到pics數組中 this.addForm.pics.push(picinfo) ?}, //處理圖片移除事件 handleRemove(file){ console.log(file) //?1.獲取將要刪除的圖片臨時路徑 const filePath?=?file.response.data.tmp_path //?2.從pics數組中找到這個圖片的索引值, //findIndex方法：x代表pics里面的每一項，x的pic等于filePath返回當前的索引 const i?=??this.addForm.pics.findIndex(x=>x.pic?===?filePath) //?3.調用splice方法，把圖片對象信息從pics中移除索引為i的一個 this.addForm.pics.splice(i,1) }, //圖片預覽事件 handlePreview(file){ // 輸出的file對象信息有一個tmp_path臨時路徑名稱和一個url地址 console.log(file) //把url地址賦值到本地 this.previewPath = file.response.data.url //打開預覽圖片的對話框 this.previewVisible = true }, </script> ``` ## 組件屬性 ***** on-exceed : 文件超出個數限制時的鉤子； ***** on-success(response, file, fileList)：文件上傳成功鉤子： response：服務器返回的信息 file：文件信息 fileList：當前組件的文件列表信息 *****