我用的是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
}