我用的是element-plus的上传插件
template,部分
<el-upload
class="avatar-uploader"
action="/api/admin/product/fileUpload" //这是我们要上传的请求地址
:show-file-list="false" 如果是true我们上传的文件显不显示
:on-success="handleAvatarSuccess" 上传成功后的回调..但是无比看官网,因为这个函数有ts类型,如果不拿过来,肯能会报错
:before-upload="beforeAvatarUpload" //上传之前的回调.有一个参数
>
<img v-if="TradeMarkForm.logoUrl" :src="TradeMarkForm.logoUrl" //我们选中的图片
class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><UploadFilled /></el-icon>
</el-upload> //图标
sicript部分
import type { UploadProps } from 'element-plus' //这是elment-plus提供的ts类型
// 上传图片前的准备
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile:any) => {
if(rawFile.type=="image/png" || rawFile.type=="image/jpeg" || rawFile.type=="image/gif" ){
if(rawFile.size/1024/1024<6){
return true
}else{
ElMessage({
type:"error",
message:"图片过于庞大"
})
return false;
}
}else{
ElMessage({
type:'error',
message:"图片必须是JPEG,PNG,GIF类型的"
})
return false
}
}
// 图片上传成功的回调
const handleAvatarSuccess: UploadProps['onSuccess'] = (response:any,uploadFile:any) => {
TradeMarkForm.logoUrl = response.data
}