2023-2-10 前端達(dá)人
1. <!-- 彈出框 --> <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible"> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="商品名稱" prop='goodsName' style="width:40%"> <el-input v-model="form.goodsName" auto-complete="off" placeholder="請(qǐng)輸入商品名稱" size="medium"></el-input> </el-form-item> <el-form-item label="商品圖片" prop='goodsImg'> <el-upload action="uploadAction" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :limit="1" :show-file-list="true" name="img" ref="upload" :data="form" accept="image/png,image/gif,image/jpg,image/jpeg" :headers="headers" :on-exceed="handleExceed" :auto-upload="false" :on-error="uploadError" :before-upload="handleBeforeUpload" :on-change="changeFile"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="50px" :src="dialogImageUrl" alt=""> </el-dialog> </el-form-item> <el-form-item label="商品對(duì)應(yīng)積分" prop='goodsIntegral'> <el-input v-model="form.goodsIntegral" auto-complete="off" placeholder="請(qǐng)輸入積分" size="medium" type="number"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancel">取 消</el-button> <el-button type="primary" @click="uploadFileFun('form')">確 定</el-button> "注意uploadFileFun('form') 括號(hào)內(nèi)記得帶引號(hào)不然可能會(huì)報(bào)validate is not defined" </div> </el-dialog>
2.data部分
data() { return { //新增和編輯彈框標(biāo)題 titleMap: { addStore: '新增商品', editStore: "修改商品" }, dialogStatus: "", //新增編輯彈出框 dialogFormVisible: false, dialogVisible: false, //表格數(shù)據(jù) tableData: [], form: { id: '', goodsName: '', goodsImg: '', goodsIntegral: '', }, rules: { goodsName: [{ required: true, message: '請(qǐng)輸入商品名稱', trigger: 'blur' }], goodsIntegral: [{ required: true, message: '請(qǐng)輸入商品積分', trigger: 'blur' }], }, headers: { Authorization: 'Bearer ' + window.localStorage.getItem("token") }, dialogImageUrl: '', //圖片回顯 uploadFiles: '', //formData img 文件 goodsId: '', //判斷是新增還是編輯 }，
// 上傳文件之前的鉤子 handleBeforeUpload(file) { console.log('按鈕', this.titleMap) if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) { this.$notify.warning({ title: '警告', message: '請(qǐng)上傳格式為image/png, image/gif, image/jpg, image/jpeg的圖片' }) } let size = file.size / 1024 / 1024 / 2 if (size > 2) { this.$notify.warning({ title: '警告', message: '圖片大小必須小于2M' }) } }, //圖片上傳超過(guò)數(shù)量限制 handleExceed(files, fileList) { this.$message.error("上傳圖片不能超過(guò)1張!"); }, handleRemove(file, fileList) { this.$message.error("刪除成功!"); }, // 圖片上傳失敗時(shí) uploadError() { this.$message.error("圖片上傳失敗!"); }, //預(yù)覽圖片 handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, //文件改變時(shí) on-change方法 ，fileList[0].raw 就是傳給后端的值 //filelist這個(gè)對(duì)象里面有很多屬性，我們上傳文件時(shí)，實(shí)際上傳的是filelist列表中每一項(xiàng)的raw,只有raw可以正常上傳， 獲取到文件后，需要定義變量保存文件。所以需要獲取filelist中的raw進(jìn)行保存。 //這里我用的formdata上傳多文件，console打印formdata，文件在控制臺(tái)中顯示的格式為binary。 changeFile(file, fileList) { this.uploadFiles = fileList[0].raw }, uploadFileFun(formName) { this.$refs[formName].validate((valid) => { let fd = new FormData(); fd.append('id', this.form.id); fd.append('goodsName', this.form.goodsName); fd.append('goodsIntegral', this.form.goodsIntegral); fd.append('img', this.uploadFiles); let config = { headers: { 'Content-Type': 'multipart/form-data' } } 根據(jù)goodsID判斷是編輯提交還是新增提交，主要針對(duì)新增編輯使用同一個(gè)彈框 if (valid && !this.goodsId) { this.$axios.post("接口地址", fd, config).then(res => { if (res.data.success == true) { this.dialogFormVisible = false this.$message({ message: res.data.msg, type: 'success' }); //新增完清空表單內(nèi)容 setTimeout(() => { this.$refs.form.resetFields(); }, 200) this.reload() } else { this.$message.error(res.data.msg); } }).catch(res => { console.log(res) }) } else { this.$axios.post("接口地址", fd, config).then(res => { if (res.data.success == true) { this.dialogFormVisible = false this.$message({ message: res.data.msg, type: 'success' }); //編輯完清空表單內(nèi)容 setTimeout(() => { this.$refs.form.resetFields(); }, 200) this.reload() } else { this.$message.error(res.data.msg); } }).catch(res => { console.log(res) }) } }) }, add() { this.dialogStatus = "addStore" this.dialogFormVisible = true this.goodsId = "" //新增商品是商品ID為空 }, // 取消 cancel() { this.dialogFormVisible = false this.$refs[formName].resetFields() }, //編輯 handleEdit(index, row) { this.form = this.tableData[index] this.dialogStatus = "editStore" this.goodsId = row.id this.currentIndex = index this.dialogFormVisible = true },
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn