el -upload组件改变图片上传框的大小尺寸

html部分代码:

    <div class="editor-after-div">
        <el-upload action=""  //action为默认请求的url，即为图片上传成功后调用的接口地址
            ref="uploadFile"  //绑定ref
            v-model:file-list="fileList" 
            list-type="picture-card"  //图片列表的类型。picture-card为图片组
            :auto-upload="false"   //是否自动上传文件
            :limit="1"  //允许上传的最大数量
            class="updata-after-upload" 
            :on-change="picSuccess" 
            :disabled="fromEdit"  //是否禁用点击上传
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <el-icon class="el-icon-plus"><Plus /></el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
    </div>

js部分代码：

const uploadFile = ref<UploadInstance>();// 声明el-upload中绑定的ref="uploadFile"属性

// 上传图片
const handleRemove = (file: UploadFile) => {
  console.log(file)
}
const handlePictureCardPreview = (file: UploadFile) => { //图片预览
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}
const picSuccess = (response: any) => { //上传成功之后图片的处理，调用后端接口
    const formData = new FormData()  //// 创建一个FormData对象
    formData.append('file', response.raw!) //二进制格式储存文件并发送
    formData.append('path','picture/')
    getImage(formData).then((res:any) => {  //传值调用接口
        if (res.status == 200) {
            ElMessage.success('上传成功');
            spotCheckPicture.value = response.name
            picShow.value = false
        }else{
            ElMessage.error('上传失败');
        }
    })
    picMsg.value = response
    hideUploadEdit.value = true
}

formData简记：formData.append是一个用于向FormData对象添加键值对的方法。它接受两个参数，第一个参数是键名，第二个参数是键值。举例：formData.append('path','picture/') 。 使用formData.append可以将键值对添加到FormData对象中，这样可以方便地将数据以键值对的形式发送到服务器。

如下图为最后二进制形式的传值： 

 

upload组件上传内容的清空：uploadFile.value!.clearFiles()。uploadFile为upload绑定的ref值

css部分代码：

深度选择器::v-deep控制样式

::v-deep .editor-after-div .el-upload{
    width:80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
}

::v-deep .editor-after-div .el-upload-list__item-thumbnail{
    width: 80px;
    height: 80px;
}
::v-deep .editor-after-div .el-upload-list__item{
    width: 80px;
    height: 80px;
}