el-upload ：data

el-upload 是 Element UI 提供的文件上传组件，可以通过 data 属性向后端传递额外的数据。如果需要在上传时传入文件名，可以在 data 中添加一个名为 filename 的属性，其值为要设置的文件名。例如： ```html <el-upload action="/upload" :data="{ filename: 'example.jpg' }" > <!-- 组件内容 --> </el-upload> ``` 这样在上传时就会将文件名设置为 example.jpg。当然，具体的实现方式还需要根据后端接口的要求来确定。

### 关于 `el-upload` 组件中 `:data` 属性缺少值的问题 当使用 `el-upload` 组件时，如果遇到 `:data` 属性缺少值的情况，通常是因为绑定的数据对象未被正确初始化或传递。确保在组件的 `data()` 函数中定义并初始化好要传递给服务器的参数。 对于当前情况，在 Vue 实例中的 `data()` 方法内已定义了一个名为 `multipartFile` 和 `uploadParam` 的对象[^1]： ```javascript data() { return { multipartFile: { imgType: "jpg", name: "上传测试", imgSize: "12kb" }, uploadParam: { open: false, title: "测试上传功能", enableUpload: false, updateSupport: 0, limit: 3, url: this.GLOBAL.serverSrc + "/uploadController/uploadImg", ContentType: "application/json" } }; } ``` 为了使这些数据能够通过 `:data` 属性发送到服务端，应该将它们组合成一个新的对象，并将其赋值给 `upload` 变量。修改后的代码如下所示： ```html <template> <div> <!-- 使用 :data="upload" 将自定义参数传入 --> <el-upload ref="upload" action="" :data="upload" :on-success="handleSuccess" :before-upload="beforeAvatarUpload"> <button>点击上传</button> </el-upload> </div> </template> <script> export default { data() { return { multipartFile: { imgType: "jpg", name: "上传测试", imgSize: "12kb" }, uploadParam: { open: false, title: "测试上传功能", enableUpload: false, updateSupport: 0, limit: 3, url: this.GLOBAL.serverSrc + "/uploadController/uploadImg", ContentType: "application/json" } }; }, computed: { // 合并两个对象作为最终提交的数据 upload() { return Object.assign({}, this.multipartFile, this.uploadParam); } }, methods: { handleSuccess(response, file, fileList) {}, beforeAvatarUpload(file) {} } }; </script> ``` 上述代码展示了如何创建一个计算属性 `upload` 来合并 `multipartFile` 和 `uploadParam` 对象的内容，从而确保所有必要的键值对都能随着文件一起上传至服务器。