vue代码如下:
<el-form-item label="头像" :label-width="labelWidth">
<el-upload
class="avatar-uploader"
:show-file-list="false"
:http-request="uploadRequest"
:before-upload="beforeAvatarUpload"
>
<img v-if="uploadImage" :src="uploadImage" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item>
ts代码如下:
/**
* 请求上传
*
*/
const uploadRequest: UploadProps['httpRequest'] = (options: UploadRequestOptions) => {
console.log(options, "请求选项");
let token = loginEmpStore().getLoginInfo().token;
return axios.post("/api/upload", options, {
headers: {
'Content-Type': 'multipart/form-data',
token,
},
}).then(response => {
uploadImage = response.data.data;
}).catch(error => {
console.log(error);
});
}
/**
* 上传之前
* @param rawFile
* @returns
*/
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
ElMessage.error('图片必须是jpeg或png!')
return false
} else if (rawFile.size / 1024 / 1024 > 10) {
ElMessage.error('必须低于10MB!')
return false
}
return true
}