elementui多图片上传服务器

对于Element UI中的多图片上传，你需要先在前端实现图片的选择和预览功能，然后将选中的图片上传到服务器。

首先，你可以使用Element UI中的Upload组件来实现图片的选择和预览。在页面中引入Upload组件，并在data中定义一个数组来保存选中的图片列表：

template>
  <div>
    <el-upload
      action="/upload" <!-- 这里填写你的上传接口地址 -->
      :auto-upload="false"
      :on-change="handleFileChange"
      :file-list="fileList"
      multiple
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="upload">上传到服务器</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [] // 保存选中的图片列表
    }
  },
  methods: {
    handleFileChange(file, fileList) {
      this.fileList = fileList;
    },
    upload() {
      // 在这里进行图片上传操作
      // 可以使用axios等工具发送POST请求将图片上传到服务器
    }
  }
}
</script>

在上面的代码中，通过`action`属性指定了上传接口的地址，通过`multiple`属性设置可以同时选择多张图片。`handleFileChange`方法用于监听文件选择事件，将选中的文件列表保存到`fileList`数组中。`upload`方法用于处理上传操作，你可以在这里使用axios或其他工具将图片上传到服务器。

接下来，在后端实现图片上传的接口。具体实现方式会因你使用的后端语言和框架而有所不同。以下是一个使用Node.js和Express框架的示例：

const express = require('express');
const multer = require('multer');

const app = express();
const upload = multer({ dest: 'uploads/' }); // 设置上传文件的保存路径

app.post('/upload', upload.array('file', 10), (req, res) => {
  // 这里的'file'参数对应前端上传组件中的name属性值
  // 10表示最多可以上传10张图片，可以根据需求进行调整

  // 对上传的图片进行处理，保存到服务器或其他操作

  res.send('上传成功');
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上面的代码中，使用了multer中间件来处理文件上传。`upload.array('file', 10)`表示接收名为'file'的参数，最多可以接收10个文件。你可以根据实际需求进行调整。

注意：这只是一个简单的示例，实际情况中可能需要对上传的图片进行验证、裁剪、压缩等操作。此外，还需要处理上传失败、文件重命名等异常情况。根据自己的实际需求进行相应的处理。

希望对你有所帮助！如有还有其他问题，请随时提问。