首页<el-upload 附带参数

<el-upload 附带参数

时间: 2025-01-17 15:45:42 浏览: 43

### 使用 `el-upload` 组件上传文件并附带额外参数在 Vue Element UI 中，`el-upload` 组件支持通过设置 `data` 属性来传递附加参数。这允许开发者在上传请求中发送除文件外的其他数据。当配置 `el-upload` 的时候，在组件选项里指定 `data` 字段可以实现这一点。此字段接受一个对象，该对象的内容会被序列化到表单数据中一同提交给服务器[^1]。下面是一个具体的例子展示怎样利用这个特性： ```html <template> <div>  <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" :data="extraParams"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过500kb</div> </el-upload> </div> </template> <script> export default { data() { return { extraParams: { // 额外参数定义在此处 key1: 'value1', key2: 'value2' } }; }, methods: { handleRemove(file, fileList) {}, handlePreview(file) {}, beforeUpload(file) {} } }; </script> ``` 在这个实例中，每当有文件被上传时，除了文件本身之外还会携带两个键值对 (`key1=value1`, `key2=value2`) 发送到目标 URL 上去。如果需要动态改变这些参数，则可以在事件处理函数内修改 `this.extraParams` 对象，从而影响后续的上传行为。

阅读全文