如今談一下elelmentui中使用Upload 上傳經過點擊或者拖拽上傳文件（圖片）api
<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
}
})
}