el-upload 附加json数据

2023-12-13 08:36:35

对于 el-upload(Element UI的上传组件)来说,如果要在上传过程中添加JSON数据,可以通过自定义事件或者使用FormData属性来完成。

  1. 自定义事件

<template>
  <div>
    <!-- 其他表单元素 -->
    
    <el-upload
      action="/your/api"
      :on-success="handleSuccess"
      :before-upload="addJsonToUpload">
      
      <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>
 
<script>
export default {
  methods: {
    addJsonToUpload(file) {
      // 将需要添加到上传文件中的 JSON 数据转换为 FormData 格式
      const formData = new FormData();
      formData.append('data', JSON.stringify({ key: 'value' }));
      formData.append('file', file);
      
      return formData;
    },
  
    handleSuccess() {
      // 处理上传成功后的操作
    }
  }
}
</script>

2.使用 formData 属性:

<template>
  <div>
    <!-- 其他表单元素 -->
    
    <el-upload
      action="/your/api"
      :headers="{ Authorization: token }"
      :data="{ data: jsonData }"
      :show-file-list="false"
      ref="uploadRef">
      
      <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      jsonData: { key: 'value' }
    };
  },
  
  mounted() {
    this.$refs.uploadRef.submit();
  }
};
</script>

文章来源:https://blog.csdn.net/xixiyuguang/article/details/134858401
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。