el-upload使用axios上传

el-upload 是一个基于 Element UI 组件库的文件上传组件。使用 axios 上传文件时，需要在 el-upload 组件的 props 中设置 action 属性为上传接口的 url，然后通过 headers 属性设置上传请求的 header，最后在上传前需要调用 before-upload 方法来进行一些额外的处理。

以下是一个示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :headers="{ Authorization: 'Bearer ' + token }"
    :before-upload="handleBeforeUpload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleBeforeUpload(file) {
      // 在上传前可以做一些额外的处理
      console.log('要上传的文件：', file)
      return true // 返回 true 表示继续上传，返回 false 则停止上传
    }
  }
}
</script>

相关问题

el-upload使用http-request 采用axios 方式上传，为什么on-success 被调用了

如果你在使用 el-upload 组件时采用 axios 方式进行文件上传，并且在上传成功后触发了 on-success 事件，可能有以下几个可能的原因：

1. 请求成功状态码：在使用 axios 发送 HTTP 请求时，默认情况下，只有当请求返回的状态码为 2xx（例如 200）时，axios 才会认为请求成功。如果服务器返回的状态码符合成功条件，axios 会触发 Promise 的 resolve 回调，从而导致 on-success 事件被调用。

2. 组件配置：请确保你正确配置了 el-upload 组件的相关属性，包括 action（请求地址）、headers（请求头信息）以及其他可能的配置项。如果配置不正确，可能会导致请求失败或触发错误回调。

3. 服务器响应：确认服务器是否正确处理了上传文件的请求，并返回了适当的响应。如果服务器返回了预期的成功响应，axios 会将其视为请求成功，从而触发 on-success 事件。

建议你仔细检查以上几个方面，确保请求配置和服务器响应都正确无误。如果问题仍然存在，可以进一步检查网络请求日志和服务器端代码，以确定问题所在。

vue+axios+el-upload实现文件上传并跨域

要实现Vue + Axios + El-upload进行文件上传并跨域，需要按照以下步骤进行操作：

1. 在Vue项目中安装axios和element-ui。在命令行中输入以下命令即可安装：

   npm install axios element-ui --save

2. 在Vue项目中创建一个上传文件的组件，例如FileUpload.vue。在该组件中导入axios和element-ui，并且引入El-upload组件。示例代码如下：

   <template>
     <div>
       <el-upload
         class="upload-demo"
         :action="uploadUrl"
         :on-success="handleUploadSuccess"
         :before-upload="beforeUpload"
         :headers="headers"
         :data="formData"
         :file-list="fileList">
         <el-button size="small" type="primary">点击上传</el-button>
       </el-upload>
     </div>
   </template>
   
   <script>
   import axios from 'axios'
   import { Message } from 'element-ui'
   
   export default {
     name: 'FileUpload',
     data () {
       return {
         fileList: [],
         uploadUrl: 'http://example.com/upload',
         formData: {},
         headers: {
           'Content-Type': 'multipart/form-data'
         }
       }
     },
     methods: {
       handleUploadSuccess (response, file, fileList) {
         // 上传成功后的处理逻辑
         console.log(response)
       },
       beforeUpload (file) {
         // 文件上传前的处理逻辑
         console.log(file)
       }
     }
   }
   </script>

3. 在组件中实现文件上传的逻辑。在上传文件之前，需要设置请求头和请求数据，并且需要处理跨域请求。可以在组件的methods中定义一个upload方法，用来发送上传请求。示例代码如下：

   <script>
   import axios from 'axios'
   import { Message } from 'element-ui'
   
   export default {
     name: 'FileUpload',
     data () {
       return {
         fileList: [],
         uploadUrl: 'http://example.com/upload',
         formData: {},
         headers: {
           'Content-Type': 'multipart/form-data'
         }
       }
     },
     methods: {
       handleUploadSuccess (response, file, fileList) {
         // 上传成功后的处理逻辑
         console.log(response)
       },
       beforeUpload (file) {
         // 文件上传前的处理逻辑
         console.log(file)
       },
       upload () {
         let config = {
           headers: this.headers,
           withCredentials: true // 跨域请求需要设置withCredentials为true
         }
         let data = new FormData()
         data.append('file', this.fileList[0].raw)
         // 向后端发送上传请求
         axios.post(this.uploadUrl, data, config)
           .then(response => {
             this.handleUploadSuccess(response)
           })
           .catch(error => {
             console.log(error)
           })
       }
     }
   }
   </script>

4. 最后，在Vue组件中使用El-upload组件，并且调用upload方法即可实现文件上传。示例代码如下：

   <template>
     <div>
       <el-upload
         class="upload-demo"
         :action="uploadUrl"
         :on-success="handleUploadSuccess"
         :before-upload="beforeUpload"
         :headers="headers"
         :data="formData"
         :file-list="fileList">
         <el-button size="small" type="primary" @click="upload">点击上传</el-button>
       </el-upload>
     </div>
   </template>
   
   <script>
   import axios from 'axios'
   import { Message } from 'element-ui'
   
   export default {
     name: 'FileUpload',
     data () {
       return {
         fileList: [],
         uploadUrl: 'http://example.com/upload',
         formData: {},
         headers: {
           'Content-Type': 'multipart/form-data'
         }
       }
     },
     methods: {
       handleUploadSuccess (response, file, fileList) {
         // 上传成功后的处理逻辑
         console.log(response)
       },
       beforeUpload (file) {
         // 文件上传前的处理逻辑
         console.log(file)
       },
       upload () {
         let config = {
           headers: this.headers,
           withCredentials: true // 跨域请求需要设置withCredentials为true
         }
         let data = new FormData()
         data.append('file', this.fileList[0].raw)
         // 向后端发送上传请求
         axios.post(this.uploadUrl, data, config)
           .then(response => {
             this.handleUploadSuccess(response)
           })
           .catch(error => {
             console.log(error)
           })
       }
     }
   }
   </script>