vue3+ts+elementPlus上传图片并回显

<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:post:add']">添加图片</el-button >

上传弹窗

 <el-form-item label="上传图片" prop="imagePath">

          <div style="display: flex; flex-direction: column; width: 100%">

            <el-upload

              class="upload-demo"

              action="#"

              :on-change="uploadCoverImage"

              :before-upload="beforeUploadCover"

              :auto-upload="false"

              multiple

              :show-file-list="false"

            >

              <div

                v-if="form.imagePath"

                class="image-box"

                :style="{ backgroundImage: 'url( ' + imgUrl + form.imagePath + ')' }"

              ></div>

              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>

              <!-- <el-button size="small" type="primary">点击上传</el-button> -->

            </el-upload>

          </div>

        </el-form-item>

<script setup name="Post">

import {

  listWebCarousel,

  addWebCarousel,

  putWebCarousel,

  delWebCarousel,

  getSingleWebCarousel,

  listProduct

} from '@/api/carousel/carousel'

import { uploadsingleFile } from '@/api/common'

import { proNewTree } from '@/api/system/cpglnew'

const postList = ref([])

const open = ref(false)

const loading = ref(true)

const showSearch = ref(true)

const ids = ref([])

const single = ref(true)

const multiple = ref(true)

const total = ref(0)

const title = ref('')

const treeData = ref([]) // 关联产品列表

const selectProductRef = ref()

const defaultProps = {

  children: 'children',

  label: 'name'

}

const data = reactive({

  form: {},

  queryParams: {

    pageNum: 1,

    pageSize: 10

    // imagePath: undefined,

    // postName: undefined,

    // status: undefined

  },

  rules: {

    productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],

    sortNum: [{ required: true, message: '排序号不能为空', trigger: 'blur' }],

    state: [{ required: true, message: '状态不能为空', trigger: 'blur' }],

    imagePath: [{ required: true, message: '图片不能为空', trigger: 'change' }]

  }

})

const imgUrl = import.meta.env.VITE_APP_BASE_API

const { queryParams, form, rules } = toRefs(data)

/** 上传文件 */

function beforeUploadCover() {}

function uploadCoverImage(file, fileList) {

  const formData = new FormData()

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

  uploadsingleFile(formData)

    .then((res) => {

      data.form.imagePath = res.fileName

    })

    .catch((err) => {})

}

</script>