vue3 element-plus 上传图片

你可以使用 Element-Plus 中的 El-Upload 组件来上传图片。以下是一个简单的示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="/your-upload-url"
    :on-success="handleSuccess"
    :headers="headers"
    :data="{userId: 123}"
    multiple
    :limit="3"
    :on-exceed="handleExceed"
    :before-upload="beforeUpload"
    :file-list="fileList"
    drag
    list-type="picture">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

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

export default {
  components: {
    ElUpload,
    ElButton
  },
  setup() {
    const fileList = ref([])
    const headers = {
      Authorization: 'Bearer ' + localStorage.getItem('token')
    }
    function handleSuccess(response, file, fileList) {
      // 上传成功后的处理函数
    }
    function handleExceed(files, fileList) {
      // 上传文件数量超出限制的处理函数
    }
    function beforeUpload(file) {
      // 上传前的处理函数
    }
    return {
      fileList,
      headers,
      handleSuccess,
      handleExceed,
      beforeUpload
    }
  }
}
</script>

<style scoped>
.upload-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
</style>

在上面的示例代码中，你需要设置 El-Upload 组件的一些属性，如 action、on-success、headers、data、multiple、limit、on-exceed、before-upload、file-list、drag 和 list-type 等。这些属性分别表示上传的地址、上传成功后的回调函数、请求头、上传时需要携带的附加数据、是否支持多选、限制上传数量、超出上传数量时的处理函数、上传前的处理函数、上传文件列表、是否支持拖拽上传和上传文件列表的类型。你可以根据实际需求来设置这些属性。