vue+element 实现多图片上传

在Vue.js和Element UI的帮助下，实现多图片上传也非常简单。我们可以使用`el-upload`组件来实现多图片上传功能。

HTML代码：

<template>
  <el-upload
    class="upload-demo"
    ref="upload"
    :action="uploadUrl"
    :multiple="true"
    :on-success="handleUploadSuccess"
    :on-error="handleUploadError"
    :limit="limit">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

在这个例子中，我们使用了`el-upload`组件来实现多图片上传功能。`multiple`属性设置为`true`，表示允许上传多个文件。`action`属性指定上传图片的URL，`on-success`和`on-error`属性分别指定上传成功和上传失败的回调函数。`limit`属性用于指定上传文件的最大数量。在点击上传按钮后，用户可以选择多个文件进行上传。

JavaScript代码：

<script>
export default {
  data() {
    return {
      uploadUrl: '/upload',
      limit: 5,
      fileList: []
    };
  },
  methods: {
    handleUploadSuccess(response, file) {
      this.fileList.push({
        name: file.name,
        url: response.url
      });
      this.$message.success('上传成功');
    },
    handleUploadError(error, file, fileList) {
      this.$message.error('上传失败');
    }
  }
};
</script>

在这个例子中，我们定义了两个回调函数`handleUploadSuccess`和`handleUploadError`，分别用于处理上传成功和上传失败的情况。在`handleUploadSuccess`函数中，我们将上传成功的图片的名称和路径添加到`fileList`数组中，以便后续使用。在`handleUploadError`函数中，我们使用`$message`组件来提示用户上传失败的信息。

需要注意的是，我们还需要在服务器端实现图片上传的逻辑。具体实现方式可以参考前面提到的PHP和Python代码示例。