el-upload组件上传后服务器回应

`el-upload` 是 Element UI 提供的一个强大的文件上传组件。当用户选择文件后，它会通过 AJAX 请求将文件发送到服务器。服务器通常会对上传的文件进行处理，例如验证、存储等操作，并返回一个响应，这个响应可能是 JSON 格式的数据。

服务器响应的内容可能包含以下几个部分：

1. **状态码**：HTTP 状态码，如 200 表示成功，400 表示错误请求，500 表示服务器内部错误等。

2. **响应体**：通常是 JSON 对象，可能包括上传是否成功的标识（比如 `success: true/false`）、上传后的文件路径 (`url` 或 `id`)、上传文件的状态信息（如 `fileName`, `fileSize`），以及任何额外的业务消息（如 `message`）。

3. **错误信息**：如果上传失败，可能会有详细的错误描述或错误码。

在前端，你可以监听 `uploadSuccess` 或 `uploadError` 事件来处理这些响应，比如更新界面显示已上传的文件信息，或者在状态码为非 200 的时候给出提示。

this.$refs.upload.on('uploadSuccess', (res, file) => {
  console.log(res);
  // 更新UI或其他业务逻辑
});

this.$refs.upload.on('uploadError', (err, file) => {
  console.error(err);
  // 显示错误信息或提示用户
});

相关问题

el-upload上传图片成功后，隐藏继续el-upload组件，只显示已上传的图片

可以通过监听 `on-success` 事件，在事件回调函数中获取上传成功的文件列表，然后将这些文件列表保存到组件的 `file-list` 属性中，最后将 `show-file-list` 属性设置为 `true`，这样组件就会隐藏上传区域，只显示已上传的文件列表。

具体实现代码如下：

<template>
  <div>
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="uploadUrl"
      :on-success="handleSuccess"
      :file-list="fileList"
      :show-file-list="showFileList"
      :auto-upload="false"
      :list-type="'picture'"
      multiple>
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <el-button size="small" type="warning" @click="clearFiles">清空文件</el-button>
    </el-upload>
    <el-divider></el-divider>
    <div v-if="showFileList">
      <el-image v-for="(file, index) in fileList" :key="index" :src="file.url" style="margin-right: 20px" :fit="fit" :preview-src-list="previewSrcList"></el-image>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/upload',
      fileList: [],
      showFileList: false,
      previewSrcList: [],
      fit: 'cover'
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      fileList.forEach(item => {
        this.previewSrcList.push(item.url)
      })
      this.fileList = fileList
      this.showFileList = true
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    clearFiles() {
      this.fileList = []
      this.showFileList = false
      this.previewSrcList = []
    }
  }
}
</script>

在上面的代码中，我们监听了 `on-success` 事件，并在事件回调函数中获取上传成功的文件列表，然后将这些文件列表保存到 `fileList` 属性中，最后将 `showFileList` 属性设置为 `true`，这样组件就会隐藏上传区域，只显示已上传的文件列表。

同时，我们在显示已上传的文件列表时，通过 `v-for` 指令遍历 `fileList` 数组，使用 `el-image` 组件来显示每个文件的预览图，并通过 `preview-src-list` 属性设置预览图的列表。

el-upload组件上传前的钩子函数

el-upload组件的上传前钩子函数为`before-upload`，可以在上传文件之前对文件进行一些处理或者校验，如果返回 false 或者 Promise.reject() 则停止上传操作。该钩子函数接受一个参数 file，表示当前要上传的文件。下面是一个示例：

<el-upload
  class="upload-demo"
  action="/upload"
  :before-upload="beforeUpload"
  :on-success="onSuccess"
  :on-error="onError">
  <el-button slot="trigger" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" type="success">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

<script>
export default {
  methods: {
    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 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return false;
      }

      return true;
    },
    onSuccess(response, file, fileList) {
      this.$message.success('上传成功！');
    },
    onError(error, file, fileList) {
      this.$message.error('上传失败！');
    }
  }
}
</script>

在该示例中，beforeUpload 方法对上传的文件进行了格式和大小的校验，如果不符合要求则返回 false，上传操作会被中止。如果符合要求则返回 true，上传操作会继续进行。