element-ui 图片上传跨域问题怎么解决

在使用 element-ui 的上传组件上传图片时，如果出现跨域问题，可以尝试以下两种解决方案：

1. 服务端设置跨域请求头

在服务端设置跨域请求头，允许前端跨域访问。具体实现方法根据你所使用的后端语言和框架而异。

例如在 Node.js 中，可以使用 `cors` 中间件来设置跨域请求头：

const express = require('express')
const cors = require('cors')

const app = express()

app.use(cors())
// ...

2. 使用代理解决跨域问题

在前端使用代理，将图片上传请求发送到代理服务器，再由代理服务器将请求转发到真正的文件上传服务器上。这样就避免了浏览器的跨域限制。

在 Vue.js 中，可以使用 `vue.config.js` 文件来配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 真正的文件上传服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api' // 将请求中的 /api 前缀替换成真正的接口地址
        }
      }
    }
  }
}

然后在 element-ui 的上传组件中，设置 `action` 属性为代理服务器的地址：

<el-upload
  action="/api/upload"
  :headers="{ Authorization: token }"
  :data="{ key: 'value' }"
>
  <!-- 上传按钮的内容 -->
</el-upload>