vue+element 上传图片

<template>

    <div>

        <!-- ===============================上传图片=========================== -->

        <el-form-item label="软件LOGO" prop="softwareLogo">

            <el-upload class="avatar-uploader"

                action="#"

                ref="logoUpload"

                list-type="picture-card"

                :file-list="fileList"

                :disabled="uploadDis"

                :auto-upload="true"

                :class="{hide: hideLogoUpload}"

                accept=".jpg,.jpeg,.png,.gif" :http-request="handleUploadFile" :on-change="handleChange"

            >

                <el-icon ><Plus /></el-icon>

                <template #file="{file}">

                    <div>

                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />

                    <span class="el-upload-list__item-actions">

                        <span

                        class="el-upload-list__item-preview"

                        @click="handlePictureCardPreview(file)"

                        >

                        <el-icon><zoom-in /></el-icon>

                        </span>

                        <span

                        class="el-upload-list__item-delete"

                        @click="handleRemove(file)"

                        >

                        <el-icon><Delete /></el-icon>

                        </span>

                    </span>

                    </div>

                </template>

            </el-upload>

            <el-dialog v-model="dialogVisible">

                <img w-full :src="dialogImageUrl" alt="" style="width:100%;"/>

            </el-dialog>

        </el-form-item>

    </div>

</template>

<script>

    export default {

        data() {

            return {

            // =========================上传图片==================================+

                fileList: [],

                uploadDis: false,

                hideLogoUpload: false,

                dialogVisible: false, //预览对话框的显示与隐藏

                dialogImageUrl: '',

            }

        },

        methods: {

            // =========================上传图片==================================

            // --------------手动上传----------------------

            handleUploadFile (file) {

                let formData = new FormData();

                formData.append('uid', file.file.uid);

                formData.append('lastModified', file.file.lastModified);

                formData.append('lastModifiedDate', file.file.lastModifiedDate);

                formData.append('name', file.file.name);

                formData.append('fileName', file.file.name);

                formData.append('size', file.file.size);

                formData.append('type', file.file.type);

                formData.append('webkitRelativePath', file.file.webkitRelativePath);

                formData.append('file', file.file);

                // console.log(formData);

                uploadImg(formData).then(res => { // 后端接口

                    customizationForm.value.softwareLogo = res.url

                })

            },

            // ----------------------------添加logo图片-----------------

            handleChange(rawFile, fileList) {

                // console.log(fileList)

                fileList.value = fileList

                // value.customizationForm.softwareLogo = rawFile.url

                if (fileList.length >= 1) {

                    uploadDis.value = true

                    hideLogoUpload.value = true

                }

                const isLt2M = rawFile.size / 1024 / 1024 < 2; // 2M limit. 检查文件大小是否大于2M

                if (!isLt2M) {

                    this.$message.error('上传图片大小不能超过2MB!')

                    return false

                }

                return true

            },

            // ---------------------------logo预览--------------------------------------

            handlePictureCardPreview (file) {

                dialogImageUrl.value = file.url

                dialogVisible.value = true

            },

            // ----------------------------logo移除---------------------------

            handleRemove (file) {

                proxy.$refs.logoUpload.clearFiles()

                customizationForm.value.softwareLogo = ''

                uploadDis.value = false

                hideLogoUpload.value = false

              }

        },

        mounted () {

                                   

        }

    }

</script>

<style lang="scss" scoped>

    .el-icon.avatar-uploader-icon[data-v-00e61323]  {

        width: 100px;

        height: 100px;

        display: flex;

        align-items: center;

        border: 1px dashed #dcdfe6;

    }

    .avatar-uploader .el-upload {

        border: 1px dashed var(--el-border-color);

        border-radius: 6px;

        cursor: pointer;

        position: relative;

        overflow: hidden;

        transition: var(--el-transition-duration-fast);

    }

    .avatar-uploader .el-upload:hover {

        border-color: var(--el-color-primary);

    }

    .el-icon.avatar-uploader-icon {

        font-size: 28px;

        color: #8c939d;

        width: 178px;

        height: 178px;

        text-align: center;

    }

    .hide .el-upload--picture-card {

        display: none;

    }

</style>