element vue 上传模板_vue(element-ui)手动上传

前言：因为element-ui通过action上传不够灵活，后改用其中属性http-request实现自定义上传(http-request： 覆盖默认的上传行为，可以自定义上传的实现)

1.template中加入如下配置：

list-type="picture-card"

multiple

ref="upload_img"

accept=".jpg, .jpeg, .png"

:on-preview="handlePictureCardPreview"

:http-request="handleTestSuccess">

2.methods加入如下方法

handleTestSuccess(file) {

// 验证图片格式

if (file.file.type.indexOf('image') == -1) {

// 文件格式

this.$message.error('请上传图片类型的文件')

//删除上传失败的图片，不然会占位

this.$refs.upload_img.uploadFiles = this.$refs.upload_img.uploadFiles.filter(

(item) => {

return file.file.name != item.name

}

)

return

}

//构建一个formData对象，因为这里要求表单类型的数据

const formData = new FormData()

formData.append('file', file.file)

axios

.post('上传的url地址', formData, {

headers: {

//携带的参数

},

})

.then((res) => {

if (res.status === 200) {

//数据处理

this.$message.success('上传检测表附件成功!')

}

})

.catch((err) => {

//删除上传失败的图片，不然会占位

this.$refs.upload_img.uploadFiles = this.$refs.upload_img.uploadFiles.filter(

(item) => {

return file.file.name != item.name

}

)

this.$message.error('上传失败!')

})

},