现在谈一下elelmentui中使用Upload 上传通过点击或者拖拽上传文件（图片）
<el-upload
name="multfile" //上传的文件字段名
class="avatar-uploader"
:action="updateUrl" //必选参数，上传的地址，即接口地址
:data="itemForm" //上传时附带的额外参数
:before-upload="beforeAvatarUpload" //上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
:on-success="handleAvatarSuccess" //文件上传成功时的钩子函数
ref="newupload"
>
<el-button
slot="trigger"
size="small"
icon="el-icon-upload"
style="margin-top: 20px;"
>选择上传文件
</el-button>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件，且不超过500kb
</div>
</el-upload>
<el-button type="primary" size="small" @click="submitBtn" style="width: 124px;"
>提 交</el-button>
script中：
data() {
return {
itemForm: {
//编辑时数据
token: sessionStorage.getItem(\'loginToken\'),
id: 0,
user_name: \'\',
user_nike_name: \'\',
user_sex: 1, //默认 1男 0女
user_phone: \'\',
user_email: \'\',
head_img: \'\'
},
fd: \'\', //向服务器进行传递的参数（带有图片formdata）
updateUrl: this.serverUrl + \'/userInfo/update\'
}
},
methods：{
//成功时保存一下后台给你返回的图片，可以渲染到页面上
handleAvatarSuccess(res, file) {
this.itemForm.head_img = URL.createObjectURL(file.raw)
},
//上传时，判断文件的类型及大小是否符合规则
beforeAvatarUpload(file) {
const isJPG =file.type == \'image/jpeg\' || file.type == \'image/png\' || file.type == \'image/gif\'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.warning(\'上传头像图片只能是 JPG/PNG/GIF 格式!\')
return isJPG
}
if (!isLt2M) {
this.$message.warning(\'上传头像图片大小不能超过 2MB!\')
return isLt2M
}
this.multfileImg = file
return isJPG && isLt2M
},
//点击提交按钮，向服务器传递你要传递的参数，涉及到formData
submitBtn() {
this.$refs.itemForm.validate(valid => {
if (valid) {
this.fd = new FormData()
this.fd.append(\'token\', sessionStorage.getItem(\'loginToken\')) //传其他参数
this.fd.append(\'id\', this.itemForm.id)
this.fd.append(\'user_name\', this.itemForm.user_name)
this.fd.append(\'user_nike_name\', this.itemForm.user_nike_name)
this.fd.append(\'user_sex\', this.itemForm.user_sex)
this.fd.append(\'user_phone\', this.itemForm.user_phone)
this.fd.append(\'user_email\', this.itemForm.user_email)
if (this.multfileImg != null) {
this.fd.append(\'multfile\', this.multfileImg)
}
api.updateUserInfo(this.fd).then(res => {
if (res) {
this.$message({ showClose: true, type: \'success\', message: \'设置成功\' })
this.initPage()
}
})
} else {
this.$message({
showClose: true,
type: \'error\',
message: \'请检查表单信息的正确性\'
})
return false
}
})
}