el-upload自定义上传方式,取消原本默认本地上传

在这里插入图片描述

//  uploadDisabled默认false,但点击show_uploadDialog时设置为true,关闭则为false
<el-upload
     :disabled="uploadDisabled"     //  当uploadDisabled为true的时候,取消原本默认本地上传
     action="/ImageServer/YmUpload_image"
     list-type="picture-card"
     :on-preview="handlePictureCardPreview"
     :on-remove="handleRemove(e, 'shopLogo')"
     :http-request="handleSuccess(e, 'shopLogo')"
     :before-upload="beforeImgUpload"
     :file-list="shopLogo"
     :on-exceed="limitTip"
     :limit="1"
     accept=".JPG,.png,.GIF"
>
	<div style="width:148px;height:148px;position:absolute;" @click="show_uploadDialog(1, 'shopLogo')"></div>  //   自定义上传方式组件
    <i class="el-icon-plus"></i>
 </el-upload>
//  限制上传文件格式以及大小
let extension = file.name.substring(file.name.lastIndexOf('.')+1)
let size = file.size / 1024 / 1024
let types = ['image/jpeg', 'image/jpg', 'image/png'];
 if(extension !== 'xlsx') {
    
    
    this.$notify.warning({
    
    
        title: '警告',
        message: `只能上传Excel2017(即后缀是.xlsx)的文件`
    });
}
if(size > 10) {
    
    
   this.$notify.warning({
    
    
       title: '警告',
       message: `文件大小不得超过10M`
   });
}
const isJPG = types.includes(file.type)
if (!isJPG) {
    
    
     this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!');
}
return isJPG;

猜你喜欢

转载自blog.csdn.net/lannieZ/article/details/111560415