vue 实现input 上传多图片

在Vue.js中实现多图上传功能，通常会结合`element-ui`库的`el-upload`组件，它提供了一个方便的方式来处理文件上传操作，包括多图上传。下面是一个简单的步骤和示例：

1. 首先，你需要安装`element-ui`和`axios`或其他HTTP客户端库用于发送POST请求到服务器。可以使用npm或yarn进行安装：

   npm install element-ui axios

2. 引入所需模块并创建Vue实例：

   <template>
     <div>
       <el-upload
         :action="uploadUrl"
         :multiple="true" 
         :on-change="handleChange"
         :file-list="fileList"
         ref="upload"
       >
         <el-button slot="trigger">点击选择图片</el-button>
         <p class="el-upload__tip">只能上传jpg/png/jpeg文件，且不超过500kb</p>
       </el-upload>
     </div>
   </template>

   <script>
   import axios from 'axios';
   export default {
     data() {
       return {
         uploadUrl: '', // 服务器接收图片的URL
         fileList: [], // 存储已选择图片的列表
       };
     },
     methods: {
       handleChange(file) {
         this.fileList.push(file);
         // 发送图片到服务器前，你可以在这里预览、压缩等处理文件
       },
       handleSubmit() {
         const formData = new FormData();
         this.fileList.forEach((item) => {
           formData.append('images', item.file);
         });
         axios.post(this.uploadUrl, formData)
           .then(response => {
             console.log('上传成功:', response.data);
           })
           .catch(error => {
             console.error('上传失败:', error);
           });
       },
     },
   };
   </script>

3. 设置`uploadUrl`为你实际的后端API接口地址，这个接口应该接受`multipart/form-data`类型的表单数据。

4. 当用户点击“上传”按钮时，`handleSubmit`方法会被触发，将所有选中的图片作为`FormData`的一部分发送到服务器。