el-upload 不使用action

`el-upload` 是 Element UI 提供的一个用于文件上传的组件，它通常用于处理用户上传文件的操作。`action` 属性是必需的，用于指定文件上传的服务器接口地址。如果不使用 `action`，那么组件将无法发送请求到服务器，也就无法完成文件上传的功能。

当你不希望直接通过服务器接口上传文件时，可能有以下几种情况：

1. **本地存储或预览**：你可以在客户端本地对文件进行处理，比如预览文件内容，但不会实际上传到服务器。这时可以不设置 `action`，而是使用组件的其他功能，如 `on-preview` 事件来处理预览。

2. **模拟数据或本地测试**：在开发环境，你可以设置一个假的 URL 或者不设置 URL，用来模拟上传数据或者方便本地测试。

3. **前端处理后端接收**：如果你想要在前端做文件的初步处理（例如压缩、格式转换等），然后将处理后的数据通过其他方式（如 AJAX 或者 POSTMessage）发送给后台，那么也可以不设置 `action`，但需要你自己管理这个过程。

但是，即使如此，`el-upload` 需要一个回调来处理文件上传的行为，你可以自定义一个 `on-change` 或者 `on-success` 回调函数来实现你的逻辑，只是服务器交互这部分需要由你自己在回调中手动实现。

相关问题

el-upload怎么使用外部方法来请求后端路径，而不用写在el-upload的action里面

你可以使用 `before-upload` 属性来在上传之前触发一个方法，然后在这个方法里面使用 `axios` 或者其他方式来发起请求获取后端路径，最后将路径赋值给 `action` 属性即可。

以下是一个示例代码：

<template>
  <el-upload
    class="upload-demo"
    :action="uploadUrl"
    :before-upload="beforeUpload"
    :on-success="onUploadSuccess"
    :on-error="onUploadError"
    :auto-upload="false"
    :file-list="fileList"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button size="small" type="success" @click="submitUpload">上传文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      uploadUrl: '',
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        // 发起请求获取后端路径
        axios.get('/api/uploadUrl').then(res => {
          this.uploadUrl = res.data.uploadUrl
          resolve(file)
        }).catch(error => {
          reject(error)
        })
      })
    },
    onUploadSuccess(response, file, fileList) {
      this.$message.success('上传成功')
    },
    onUploadError(error, file, fileList) {
      this.$message.error('上传失败')
    },
    submitUpload() {
      this.$refs.upload.submit()
    }
  }
}
</script>

在这个示例中，我们使用了 `before-upload` 属性来触发一个方法 `beforeUpload`，在这个方法里面发起了一个请求来获取后端路径，并将路径赋值给 `uploadUrl` 变量。最后，我们将 `uploadUrl` 变量作为 `action` 属性的值传递给 `el-upload` 组件。

这样就实现了在不写死上传路径的情况下，通过外部方法获取后端路径的目的。

el-upload el-upload 在异步

`el-upload` 是 Element UI 提供的一个用于文件上传的组件，它支持在浏览器本地或服务器端进行异步上传操作。在异步模式下，`el-upload` 的核心特点是通过 `on-success`、`on-error` 和 `on-progress` 等回调函数处理上传过程的不同阶段：

1. `before-upload`：当用户选择文件开始上传前触发，可以在这里进行一些预处理判断，如验证文件类型或大小。

2. `uploading`：文件正在上传时触发，可以更新上传进度条，并显示上传状态给用户。

3. `success`：文件上传成功后触发，通常会接收到服务器返回的数据，可以根据这个数据做进一步处理，比如更新页面内容。

4. `error`：文件上传失败时触发，可以捕获错误信息并展示给用户，例如网络连接中断、服务器响应错误等。

5. `on-remove`：用户手动移除已上传的文件时触发，可用于清理对应的数据或资源。

使用异步模式时，你需要设置 `action` 属性指向你的服务器接口地址，并监听相应的回调函数来处理上传结果。例如：

<template>
  <el-upload
    action="your-server-api-url"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-progress="handleProgress"
  >
    <el-button slot="trigger">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      // 预处理逻辑
    },
    handleSuccess(response, file) {
      // 成功处理逻辑
    },
    handleError(error, file) {
      // 错误处理逻辑
    },
    handleProgress(progress, file) {
      // 进度处理逻辑
    }
  }
}
</script>