vue el-upload 和form表單一起提交

2023-2-10    前端達人

圖片上傳和表單同時一起提交 

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="請輸入商品名稱" 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="商品對應積分" prop='goodsIntegral'> <el-input v-model="form.goodsIntegral" auto-complete="off" placeholder="請輸入積分" 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')  括號內(nèi)記得帶引號不然可能會報validate is not defined" </div> </el-dialog> 
                    
    

                        
  • 
                            1
                        
    • 

                        
  • 
                            2
                        
    • 

                        
  • 
                            3
                        
    • 

                        
  • 
                            4
                        
    • 

                        
  • 
                            5
                        
    • 

                        
  • 
                            6
                        
    • 

                        
  • 
                            7
                        
    • 

                        
  • 
                            8
                        
    • 

                        
  • 
                            9
                        
    • 

                        
  • 
                            10
                        
    • 

                        
  • 
                            11
                        
    • 

                        
  • 
                            12
                        
    • 

                        
  • 
                            13
                        
    • 

                        
  • 
                            14
                        
    • 

                        
  • 
                            15
                        
    • 

                        
  • 
                            16
                        
    • 

                        
  • 
                            17
                        
    • 

                        
  • 
                            18
                        
    • 

                        
  • 
                            19
                        
    • 

                        
  • 
                            20
                        
    • 

                        
  • 
                            21
                        
    • 

                        
  • 
                            22
                        
    • 

                        
  • 
                            23
                        
    • 

                        
  • 
                            24
                        
    • 

                        
  • 
                            25
                        
    • 

                        
  • 
                            26
                        
    • 

                        
  • 
                            27
                        
    • 

                        
  • 
                            28
                        
    • 

                        
  • 
                            29
                        
    •

2.data部分 

 data() { return { //新增和編輯彈框標題 titleMap: { addStore: '新增商品', editStore: "修改商品" }, dialogStatus: "", //新增編輯彈出框 dialogFormVisible: false, dialogVisible: false, //表格數(shù)據(jù) tableData: [], form: { id: '', goodsName: '', goodsImg: '', goodsIntegral: '', }, rules: { goodsName: [{ required: true, message: '請輸入商品名稱', trigger: 'blur' }], goodsIntegral: [{ required: true, message: '請輸入商品積分', trigger: 'blur' }], }, headers: { Authorization: 'Bearer ' + window.localStorage.getItem("token") }, dialogImageUrl: '', //圖片回顯 uploadFiles: '', //formData img 文件 goodsId: '', //判斷是新增還是編輯 }， 
                    
    

                        
  • 
                            1
                        
    • 

                        
  • 
                            2
                        
    • 

                        
  • 
                            3
                        
    • 

                        
  • 
                            4
                        
    • 

                        
  • 
                            5
                        
    • 

                        
  • 
                            6
                        
    • 

                        
  • 
                            7
                        
    • 

                        
  • 
                            8
                        
    • 

                        
  • 
                            9
                        
    • 

                        
  • 
                            10
                        
    • 

                        
  • 
                            11
                        
    • 

                        
  • 
                            12
                        
    • 

                        
  • 
                            13
                        
    • 

                        
  • 
                            14
                        
    • 

                        
  • 
                            15
                        
    • 

                        
  • 
                            16
                        
    • 

                        
  • 
                            17
                        
    • 

                        
  • 
                            18
                        
    • 

                        
  • 
                            19
                        
    • 

                        
  • 
                            20
                        
    • 

                        
  • 
                            21
                        
    • 

                        
  • 
                            22
                        
    • 

                        
  • 
                            23
                        
    • 

                        
  • 
                            24
                        
    • 

                        
  • 
                            25
                        
    • 

                        
  • 
                            26
                        
    • 

                        
  • 
                            27
                        
    • 

                        
  • 
                            28
                        
    • 

                        
  • 
                            29
                        
    • 

                        
  • 
                            30
                        
    • 

                        
  • 
                            31
                        
    • 

                        
  • 
                            32
                        
    • 

                        
  • 
                            33
                        
    • 

                        
  • 
                            34
                        
    • 

                        
  • 
                            35
                        
    • 

                        
  • 
                            36
                        
    • 

                        
  • 
                            37
                        
    • 

                        
  • 
                            38
                        
    • 

                        
  • 
                            39
                        
    •
  1. methods部分 手動上傳圖片 **var fd = new FormData()**添加 
// 上傳文件之前的鉤子 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: '請上傳格式為image/png, image/gif, image/jpg, image/jpeg的圖片' }) } let size = file.size / 1024 / 1024 / 2 if (size > 2) { this.$notify.warning({ title: '警告', message: '圖片大小必須小于2M' }) } }, //圖片上傳超過數(shù)量限制 handleExceed(files, fileList) { this.$message.error("上傳圖片不能超過1張!"); }, handleRemove(file, fileList) { this.$message.error("刪除成功!"); }, // 圖片上傳失敗時 uploadError() { this.$message.error("圖片上傳失敗!"); }, //預覽圖片 handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, //文件改變時 on-change方法 ，fileList[0].raw 就是傳給后端的值 //filelist這個對象里面有很多屬性，我們上傳文件時，實際上傳的是filelist列表中每一項的raw,只有raw可以正常上傳， 獲取到文件后，需要定義變量保存文件。所以需要獲取filelist中的raw進行保存。 //這里我用的formdata上傳多文件，console打印formdata，文件在控制臺中顯示的格式為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判斷是編輯提交還是新增提交，主要針對新增編輯使用同一個彈框 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 }, 
                    
    

                        
  • 
                            1
                        
    • 

                        
  • 
                            2
                        
    • 

                        
  • 
                            3
                        
    • 

                        
  • 
                            4
                        
    • 

                        
  • 
                            5
                        
    • 

                        
  • 
                            6
                        
    • 

                        
  • 
                            7
                        
    • 

                        
  • 
                            8
                        
    • 

                        
  • 
                            9
                        
    • 

                        
  • 
                            10
                        
    • 

                        
  • 
                            11
                        
    • 

                        
  • 
                            12
                        
    • 

                        
  • 
                            13
                        
    • 

                        
  • 
                            14
                        
    • 

                        
  • 
                            15
                        
    • 

                        
  • 
                            16
                        
    • 

                        
  • 
                            17
                        
    • 

                        
  • 
                            18
                        
    • 

                        
  • 
                            19
                        
    • 

                        
  • 
                            20
                        
    • 

                        
  • 
                            21
                        
    • 

                        
  • 
                            22
                        
    • 

                        
  • 
                            23
                        
    • 

                        
  • 
                            24
                        
    • 

                        
  • 
                            25
                        
    • 

                        
  • 
                            26
                        
    • 

                        
  • 
                            27
                        
    • 

                        
  • 
                            28
                        
    • 

                        
  • 
                            29
                        
    • 

                        
  • 
                            30
                        
    • 

                        
  • 
                            31
                        
    • 

                        
  • 
                            32
                        
    • 

                        
  • 
                            33
                        
    • 

                        
  • 
                            34
                        
    • 

                        
  • 
                            35
                        
    • 

                        
  • 
                            36
                        
    • 

                        
  • 
                            37
                        
    • 

                        
  • 
                            38
                        
    • 

                        
  • 
                            39
                        
    • 

                        
  • 
                            40
                        
    • 

                        
  • 
                            41
                        
    • 

                        
  • 
                            42
                        
    • 

                        
  • 
                            43
                        
    • 

                        
  • 
                            44
                        
    • 

                        
  • 
                            45
                        
    • 

                        
  • 
                            46
                        
    • 

                        
  • 
                            47
                        
    • 

                        
  • 
                            48
                        
    • 

                        
  • 
                            49
                        
    • 

                        
  • 
                            50
                        
    • 

                        
  • 
                            51
                        
    • 

                        
  • 
                            52
                        
    • 

                        
  • 
                            53
                        
    • 

                        
  • 
                            54
                        
    • 

                        
  • 
                            55
                        
    • 

                        
  • 
                            56
                        
    • 

                        
  • 
                            57
                        
    • 

                        
  • 
                            58
                        
    • 

                        
  • 
                            59
                        
    • 

                        
  • 
                            60
                        
    • 

                        
  • 
                            61
                        
    • 

                        
  • 
                            62
                        
    • 

                        
  • 
                            63
                        
    • 

                        
  • 
                            64
                        
    • 

                        
  • 
                            65
                        
    • 

                        
  • 
                            66
                        
    • 

                        
  • 
                            67
                        
    • 

                        
  • 
                            68
                        
    • 

                        
  • 
                            69
                        
    • 

                        
  • 
                            70
                        
    • 

                        
  • 
                            71
                        
    • 

                        
  • 
                            72
                        
    • 

                        
  • 
                            73
                        
    • 

                        
  • 
                            74
                        
    • 

                        
  • 
                            75
                        
    • 

                        
  • 
                            76
                        
    • 

                        
  • 
                            77
                        
    • 

                        
  • 
                            78
                        
    • 

                        
  • 
                            79
                        
    • 

                        
  • 
                            80
                        
    • 

                        
  • 
                            81
                        
    • 

                        
  • 
                            82
                        
    • 

                        
  • 
                            83
                        
    • 

                        
  • 
                            84
                        
    • 

                        
  • 
                            85
                        
    • 

                        
  • 
                            86
                        
    • 

                        
  • 
                            87
                        
    • 

                        
  • 
                            88
                        
    • 

                        
  • 
                            89
                        
    • 

                        
  • 
                            90
                        
    • 

                        
  • 
                            91
                        
    • 

                        
  • 
                            92
                        
    • 

                        
  • 
                            93
                        
    • 

                        
  • 
                            94
                        
    • 

                        
  • 
                            95
                        
    • 

                        
  • 
                            96
                        
    • 

                        
  • 
                            97
                        
    • 

                        
  • 
                            98
                        
    • 

                        
  • 
                            99
                        
    • 

                        
  • 
                            100
                        
    • 

                        
  • 
                            101
                        
    • 

                        
  • 
                            102
                        
    • 

                        
  • 
                            103
                        
    • 

                        
  • 
                            104
                        
    • 

                        
  • 
                            105
                        
    • 

                        
  • 
                            106
                        
    • 

                        
  • 
                            107
                        
    • 

                        
  • 
                            108
                        
    • 

                        
  • 
                            109
                        
    • 

                        
  • 
                            110
                        
    • 

                        
  • 
                            111
                        
    • 

                        
  • 
                            112
                        
    • 

                        
  • 
                            113
                        
    • 

                        
  • 
                            114
                        
    • 

                        
  • 
                            115
                        
    • 

                        
  • 
                            116
                        
    • 

                        
  • 
                            117
                        
    • 

                        
  • 
                            118
                        
    • 

                        
  • 
                            119
                        
    •
文章


藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。


分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


日歷

鏈接

個人資料

藍藍設計的小編 http://www.yvirxh.cn

存檔