vue+element如何传输图片

在Vue.js和Element UI中，你可以使用`<el-upload>`组件来实现图片的传输。

首先，在你的Vue组件中引入`<el-upload>`组件并设置相应的属性。以下是一个简单的例子：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/your-upload-url"  <!-- 设置上传图片的URL地址 -->
      :on-success="handleSuccess"  <!-- 设置上传成功后的回调函数 -->
      :on-error="handleError"  <!-- 设置上传失败后的回调函数 -->
      :before-upload="beforeUpload"  <!-- 设置上传之前的回调函数 -->
      :auto-upload="false"  <!-- 设置是否自动上传 -->
      :limit="1"  <!-- 设置上传图片的数量限制 -->
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // 处理上传成功后的逻辑
      console.log(response);
    },
    handleError(error, file, fileList) {
      // 处理上传失败后的逻辑
      console.log(error);
    },
    beforeUpload(file) {
      // 处理上传之前的逻辑，例如验证文件类型和大小
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('只能上传jpg/png文件!');
      }
      if (!isLt2M) {
        this.$message.error('文件大小不能超过2MB!');
      }
      
      return isJPG && isLt2M;
    }
  }
}
</script>

在上面的代码中，你需要设置以下属性：

- `action`：设置上传图片的URL地址。
- `on-success`：设置上传成功后的回调函数，可以在该函数中处理服务器返回的数据。
- `on-error`：设置上传失败后的回调函数。
- `before-upload`：设置上传之前的回调函数，可以在该函数中进行文件类型和大小的验证。
- `auto-upload`：设置是否自动上传。如果设为`false`，则需要手动调用上传方法。
- `limit`：设置上传图片的数量限制。

当用户选择图片后，可以通过`handleSuccess`和`handleError`方法处理上传成功和上传失败的逻辑。在`beforeUpload`方法中，你可以进行文件类型和大小的验证，并返回验证结果。

需要注意的是，上述代码只是一个简单示例，你需要根据实际需求进行相应的修改和完善。