Vue3+element-plus自定义上传图片+带参数的POST请求

<template>
  <el-upload
    action="http://example.com/upload"
    :data="additionalData"
    :on-success="handleSuccess"
    :on-error="handleError">
    <el-button slot="trigger" size="small" type="primary">选择图片</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
  </el-upload>
</template>
 
<script>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
 
export default {
  setup() {
    const additionalData = ref({ param1: 'value1', param2: 'value2' });
 
    const handleSuccess = (response, file, fileList) => {
      ElMessageBox.alert('图片上传成功', '提示');
    };
 
    const handleError = (err, file, fileList) => {
      ElMessageBox.alert('图片上传失败', '提示');
    };
 
    return {
      additionalData,
      handleSuccess,
      handleError,
    };
  },
};
</script>

这个例子展示了如何在Vue 3和Element Plus中创建一个带额外参数的图片上传组件。el-upload组件的action属性设置了上传的服务器地址，data属性用于设置额外的POST请求参数。on-success和on-error属性用于处理上传成功和失败的回调。