上传多张图片的html表单,element在form表单里上传多张张图片

1.template里面

title="新增"

:visible.sync="Visible"

width="30%"

>

ref="upload"

:show-file-list="true"

class="upload-demo"

action=""

:limit="6"

:before-upload="beforeupload"

:auto-upload="false"

:on-change="handleOnChange"

:data="ruleForm"

>

取 消

确 定

2.data

data() {

return {

Visible: true,

sliderImages: [],

addForm: {

sliderImage: ''

},

rules: {

image: [

{ required: true, message: '请上传图片', trigger: 'blur' }

]

}

}

},

3.methods

// 阻止upload的自己上传，进行再操作

handleOnChange(file, fileList) {

this.addForm.sliderImage = URL.createObjectURL(file.raw)

var files = this.sliderImages

files.push(this.addForm.sliderImage)

},

beforeupload(file) {

return true

},

submitForms(addForm) { // 新增表单提交

this.axios({

method: 'post',

url: 'url',

headers: { Authorization: window.sessionStorage.getItem('token') },

data: { }

})

.then(res => {

this.$refs[addForm].validate((valid) => {

if (valid) {

this.$refs.upload.submit()

// 不可缺少

} else {

console.log('error submit!!')

return false

}

})

})

.catch(function(error) {

console.log(error)

})

},