1、HTML部分
<el-col :span="24">
<el-form-item label="头像" prop="farmerAvatarUrl">
<el-upload
class="avatar-uploader"
:action="url"
:show-file-list="false"
:before-upload="beforeUploadHandle"
:on-success="successHandle">
<img v-if="dataForm.farmerAvatarUrl" :src="dataForm.farmerAvatarUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<div v-if="!dataForm.fileUrl" class="el-upload__text">1将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
</el-form-item>
</el-col>
2、JS部分
import Cookies from 'js-cookie'
data () {
return {
url: `${window.SITE_CONFIG['apiURL']}/oss/file/localhostUpload?token=${Cookies.get('token')}`,
dataForm: {
farmerAvatarUrl
}
}
},
methods: {
// 头像上传之前
beforeUploadHandle (file) {
if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
this.$message.error(this.$t('upload.tip', { 'format': 'jpg、png、gif' }))
return false
}
},
// 头像上传成功
successHandle (res, file, fileList) {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message.success('图片上传成功')
this.dataForm.farmerAvatarUrl = res.data
},
}