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')  括号内记得带引号不然可能会报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, //表格数据 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' }) } }, //图片上传超过数量限制 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' } } 根据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' }); //新增完清空表单内容 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' }); //编辑完清空表单内容 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设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。


分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


« 效率至上｜带你认识提升用户效率的4种方法 使用Node.js的formidable模块实现文件上传 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档