vue3element上传图片

在Vue3中使用Element UI库上传图片通常会涉及到`el-upload`组件。Element UI的`el-upload`是一个非常方便的文件上传组件，它支持多种上传方式，包括点击按钮、拖拽文件等。以下是使用Element Upload组件上传图片的基本步骤：

1. 引入依赖：

<template>
  <el-upload
    :action="uploadUrl"
    :on-success="handleSuccess"
    :file-list="imageList"
    :limit="1" <!-- 设置最多上传一张图片 -->
  >
    <el-button type="primary">选择图片</el-button>
  </el-upload>
</template>

<script>
import { ref } from 'vue';
import { ElUpload } from 'element-plus';

export default {
  components: {
    ElUpload,
  },
  data() {
    return {
      uploadUrl: '', // 你需要填写图片上传的服务器地址
      imageList: [], // 用于存储已上传的图片信息
    };
  },
  methods: {
    handleSuccess(response, file) {
      if (response.success) {
        this.imageList.push({ name: file.name, url: response.data.url }); // 将响应数据添加到列表
      }
    },
  },
};
</script>

2. 在`handleSuccess`方法中，你可以处理服务器返回的图片URL，并将其添加到`imageList`里以便展示。