vue2+elementui上传照片(el-upload 超简单)

在Vue 2项目中使用Element UI的el-upload组件来上传照片非常简单。以下是一个基本的例子：

<template>
  <el-upload
    class="upload-photo"
    action="https://your-api-endpoint.com/upload"
    :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>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // 成功上传后的回调
      console.log('File uploaded successfully:', response);
    },
    handleError(err, file, fileList) {
      // 上传失败的回调
      console.error('Error uploading file:', err);
    },
  },
};
</script>
 
<style>
.upload-photo .el-upload__tip {
  margin-left: 10px;
}
</style>

确保替换action属性的URL为你的实际图片上传API端点。handleSuccess和handleError方法用于处理上传成功和失败的情况。这个例子中使用了Element UI的el-button作为触发上传的按钮，并展示了上传的格式提示。