elment form表单中上传图片

在element form表单中上传图片，可以通过使用element-ui的upload组件来实现。该组件提供了简单易用的上传图片功能。

首先，在Vue组件的template中添加upload组件：

<el-upload
  class="upload-demo"
  action="/file/upload"  //设置上传地址
  :on-success="handleSuccess"  //设置上传成功的回调函数
  :before-upload="beforeUpload"  //设置上传前的回调函数
  :file-list="fileList"  //绑定上传的文件列表
  multiple  //设置是否支持多文件上传
  :auto-upload="false"  //设置是否自动上传
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

然后，在Vue组件的script部分定义相关方法：

data() {
  return {
    fileList: []  //定义文件列表
  };
},
methods: {
  handleSuccess(response, file, fileList) {
    //上传成功的回调函数
    console.log(response);
  },
  beforeUpload(file) {
    //上传前的回调函数
    const isJPG = file.type === 'image/jpeg';
    const isPNG = file.type === 'image/png';
    const isLt500KB = file.size / 1024 < 500;

    if (!isJPG && !isPNG) {
      this.$message.error('只能上传jpg/png格式的图片');
    }
    if (!isLt500KB) {
      this.$message.error('图片大小不能超过500KB');
    }
    return (isJPG || isPNG) && isLt500KB;
  },
},

在以上代码中，我们通过设置action属性来指定文件上传的地址，通过on-success属性绑定上传成功时的回调函数handleSuccess，通过before-upload属性绑定上传前的回调函数beforeUpload来限制文件类型和文件大小。

其中，handleSuccess方法用于处理上传成功后的逻辑，比如展示上传成功的图片或者返回的图片链接。beforeUpload方法用于判断文件类型和文件大小是否符合要求，若不符合要求则会弹出错误提示。

最后，通过样式调整可以美化上传按钮和提示文字。