el-table列表中上传图片

### 实现图片上传功能 为了在 `el-table` 中集成图片上传功能，可以创建自定义表格列来容纳文件输入控件以及预览已上传的图像。下面是一个具体的实现方案： #### HTML结构与Vue实例配置 首先，在HTML模板部分引入必要的Element UI组件，并设置好用于呈现数据表单的容器。 ```html <template> <div id="app"> <!-- 表格 --> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="imagePath" label="图片路径"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-upload action="/api/upload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="beforeAvatarUpload" :file-list="scope.row.fileList" :on-success="(response, file, fileList) => handleSuccess(response, file, fileList, scope.$index)" > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt /> </el-dialog> </template> </el-table-column> </el-table> <!-- 分页器 --> <div class="block" style="margin-top:15px;margin-left:60%" v-if="tableData"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30,40,50,100]" :page-size="pageSize" layout="total, prev, pager, next,jumper" :total="totalItems" ></el-pagination> </div> </div> </template> ``` 此段代码展示了如何通过`slot-scope`访问当前行的数据并将其传递给子组件，从而允许每一行都有独立的操作按钮和状态管理[^2]。 #### JavaScript逻辑处理 接着是在JavaScript中编写相应的事件处理器和其他辅助函数，这些方法负责控制上传行为、更新UI界面等任务。 ```javascript <script> export default { data() { return { tableData: [ { name: 'Item A', imagePath: '', fileList: [] }, // 更多项目... ], currentPage: 1, pageSize: 10, totalItems: 0, dialogImageUrl: '', dialogVisible: false }; }, methods: { handleRemove(file, fileList) {}, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, beforeAvatarUpload(file) { const isJPGOrPNG = ['image/jpeg', 'image/png'].indexOf(file.type) !== -1; if (!isJPGOrPNG) { this.$message.error('仅支持JPEG/PNG格式！'); } const isValidFileSize = file.size / 1024 / 1024 < 2; if (!isValidFileSize) { this.$message.error('图片大小不得超过2MB!'); } return isJPGOrPNG && isValidFileSize; }, handleSuccess(response, file, fileList, rowIndex) { let item = this.tableData[rowIndex]; item.imagePath = response.data || ''; // 假设服务器返回的是图片URL item.fileList.push({ ...file }); }, handleSizeChange(val) { console.log(`每页 ${val} 条`); this.pageSize = val; }, handleCurrentChange(val) { console.log(`当前页: ${val}`); this.currentPage = val; } } }; </script> ``` 上述脚本实现了基本的功能需求，包括但不限于验证文件类型及尺寸限制、成功回调时保存新链接到对应记录里等功能。