From 1861d195f7f3a7364c1099356858c94a6c0741e2 Mon Sep 17 00:00:00 2001 From: 明梦爽 <2972214568@qq.com> Date: 星期三, 02 三月 2022 18:11:16 +0800 Subject: [PATCH] 所有功能实现 --- src/components/Administrator/Welcome.vue | 64 +++++++++++++++++++++++++++++++- 1 files changed, 62 insertions(+), 2 deletions(-) diff --git a/src/components/Administrator/Welcome.vue b/src/components/Administrator/Welcome.vue index b46f470..8f99e0f 100644 --- a/src/components/Administrator/Welcome.vue +++ b/src/components/Administrator/Welcome.vue @@ -1,14 +1,74 @@ <template> <div> <h2>娆㈣繋杩涘叆鍚庡彴绠$悊绯荤粺</h2> + + <el-upload + ref="upload" + action + accept="image/*" + :limit= 3 + :file-list='filelist' + list-type="picture-card" + :on-preview="handlePictureCardPreview" + :on-remove="handleRemove" + :http-request='upload'> + <i class="el-icon-plus"></i> + </el-upload> + <el-dialog :visible.sync="dialogVisible"> + <img width="100%" :src="dialogImageUrl" alt=""> + </el-dialog> + <el-button @click="save">淇濆瓨</el-button> </div> </template> <script> - - +import {fileUpload, update} from '../../api/api' export default { + data() { + return { + // fileList: [] + imageUrl:'', + filelist:[], + delList:[], + dialogVisible:false, + dialogImageUrl:'', + } + }, + methods:{ + save(){ + //鍙栧埌鍥剧墖闆嗗悎 + let uploadImglist = this.$refs.upload.uploadFiles + console.log(uploadImglist); + let formData = new FormData(); + uploadImglist.forEach(item => { + //ready鐘舵�佺殑鏄湭涓婁紶鐨� success鏄凡缁忎笂浼犳垚鍔熺殑锛屽彧闇�瑕佹坊鍔犳湭涓婁紶鐨勫嵆鍙� + if(item.status == "ready"){ + formData.append('file', item.raw); + } + }); + formData.get('file') + fileUpload(formData).then(res=>{ + //涓婁紶鎺ュ彛 + console.log(res); + }) + }, + // 棰勮鍥剧墖 + handlePictureCardPreview(file){ + this.dialogVisible = true + this.dialogImageUrl=file.url + console.log(this.dialogImageUrl); + }, + // 鍒犻櫎鍥剧墖 + handleRemove(file){ + //鍒ゆ柇鐘舵�侊紝濡傛灉鏄笂浼犳垚鍔熺殑 闇�瑕佹妸id鍔犲埌鍒犻櫎id闆嗗悎閲岄潰 + if(file.status == 'success'){ + this.delList.push(file.id) + } + }, + upload(){ + } + } } </script> -- Gitblit v1.8.0