<template>
<div>
<el-form ref="form" :rules='rules' :model="formsq" label-width="80px">
<el-form-item label="商品名称" prop="name">
<el-input v-model="formsq.name" clearable placeholder="请填写商品名
称"></el-input>
</el-form-item>
<el-form-item label="商品价格" prop="price">
<el-input v-model="formsq.price" type="number" clearable
placeholder="请填写商品价格"></el-input>
</el-form-item>
<el-form-item label="商品图片" prop="fileList">
<el-input :hidden="true" v-model="formsq.fileList"/>
<el-upload :disabled="disabled"
:data="{ isOA: true }"
:action="getAuthUpload"
:before-upload="beforeUploadListener"
:limit="5"
:on-error="errorListener"
:on-remove="removeListener"
:on-success="onSuccessListener">
<el-button size="small" type="primary">点击上传</el-button>
<div class="el-upload__tip" slot="tip">提示:上传文件小于3M</div>
<div class="el-upload__tip" slot="tip" style="color: #ff290c">注意:包含但不限于《供应商信息登记表》、《供应商调查/审查确认表》</div>
</el-upload>
</el-form-item>
<div class="x-form-button">
<el-button @click="zxHandleSubmit('formsq')"
type="primary">提交</el-button>
</div>
</el-form>
</div>
</template>
<script>
import { auth } from '@/api/srm/auth'
import { getUpload } from '@/api/srm/fileUtils'
export default {
data() {
return {
// form validate rules
rules: {
fileList: [{ required: true, message: '请上传图片', trigger: 'change'}]
},
List:[],
formsq:{
fileList: null
}
}
},
computed: {
getAuthUpload() {
return getUpload()
}
},
methods: {
beforeUploadListener({ size }) {
if (size > 3072000) {
this.$message('上传文件太大,请压缩后上传!')
return false
}
},
onSuccessListener({ code, message, data }, file, fileList) {
if (code === 200) {
this.fileList.push(data)
this.$message.success('上传成功')
if(this.List && this.List.length > 0){
this.formsq.fileList = JSON.stringify(this.List)
}
} else {
this.$message.error('上传失败')
}
},
errorListener(err, file) {
this.$message.error('上传失败')
},
removeListener({ response }, List) {
const { code, data } = response
if (code === 200) {
this.List.forEach(function(item, index, arr) {
if (item == data) {
arr.splice(index, 1)
}
})
}
},
zxHandleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.initData()
}
})
},
async initData() {
try {
const params = { ...this.formsq }
const { message } = await auth(params)
this.disabled = true
this.$message.success(message)
} catch ({ message }) {
this.$message.error(message)
}
}
}
}
</script>
<style>
</style>
结合el-form表单验证的思路是新建一个隐藏的input框,onchange触发validate事件
<el-input :hidden="true" v-model="imgValue"/>
![]()

只是部分代码不全
版权声明:本文为weixin_43962877原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。