elementui文件上传的action

Element UI文件上传的action必须是string类型的。如果你只改变了action的路径，但是接口需要传递参数，那么你需要添加一个http-request属性。在函数中，你可以通过请求接口传送参数来实现上传。以下是一个示例代码：

beforeAvatarUploadThree(file) {
  let params = new FormData()
  params.append("loginId", this.inf.userId);
  params.append("projId", this.proproId);
  params.append("file", file);
  axios({
    method:'post',
    url:'http://112.126.75.177:8080/eSIM/i/flowSheetPictureFour',
    data:params,
    headers:{
      'content-type':'multipart/form-data'
    }
  }).then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })
}

在上传文件之前，你可以使用以下三种方法进行验证：

1. 文件大小验证
2. 文件类型验证
3. 额外参数传输

相关问题

elementUI 文件上传

Element UI 提供了一个非常方便的文件上传组件。要使用Element-UI的文件上传，首先确保已经正确安装和引入了Element-UI组件库。

然后，可以按照以下步骤来实现文件上传：

1. 在需要使用文件上传的页面中，引入`el-upload`组件：

<template>
  <el-upload
    action="your-upload-url"
    :on-success="handleUploadSuccess"
    :limit="3"
    :file-list="fileList"
    multiple
    drag
    list-type="picture"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

2. 在组件的`data`属性中定义`fileList`数组，并在`methods`中定义`handleUploadSuccess`方法处理上传成功的回调：

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleUploadSuccess(response, file, fileList) {
      // 处理上传成功的回调
      console.log("上传成功");
      console.log(response); // 上传成功后服务器返回的数据
      console.log(file); // 当前上传的文件对象
      console.log(fileList); // 文件列表数组
    }
  }
};
</script>

3. 在`action`属性中填写你的文件上传接口地址，通过`on-success`属性指定上传成功的回调方法。

这样就可以实现一个简单的文件上传功能了，你可以根据需求对组件的其他属性进行配置，如限制文件类型、文件大小等。

elementui文件上传

Element UI提供了上传文件的组件el-upload。使用el-upload需要先安装Element UI库。安装方法如下：

1. 使用npm安装Element UI库

npm i element-ui -S

2. 在需要使用上传组件的页面中引入Element UI库

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 在模板中使用el-upload组件

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :limit="3"
    :file-list="fileList">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

上面的代码中，el-upload组件的属性说明如下：

- action：文件上传的地址
- on-success：文件上传成功后的回调函数
- before-upload：文件上传前的钩子函数
- limit：最多上传文件个数
- file-list：已上传的文件列表

在上传文件时，可以通过before-upload钩子函数对文件进行校验，例如限制文件大小、文件格式等。在上传成功后，可以通过on-success回调函数获取上传成功后的文件信息。

更详细的使用方法可以参考Element UI官方文档：https://element.eleme.io/#/zh-CN/component/upload