element怎么图片上传

Element UI 中实现图片上传的方式有多种，比较常用的有两种方式：基于后端接口和基于七牛云存储。如果采用基于后端接口的方式，需要进行以下步骤：

1.将上传文件的 input 组件包裹在 form 表单组件内。

2.设置 form 的 enctype 属性为 multipart/form-data。

3.添加隐藏的 input 组件来提交用于标识上传文件类型的字段。

4.通过创建 FormData 对象，将上传文件添加到表单中。

5.使用 Axios 等网络请求库将表单数据上传到后端。

如果采用基于七牛云存储的方式，需要进行以下步骤：

1.在 Element UI 的 Upload 组件中设置 action 属性为七牛云存储接口地址。

2.将上传后的图片 URL 拼接成完整的可访问 URL。

这些方式都可以实现 Element UI 中的图片上传功能，具体选择哪种方式要看自己的实际需求和技术能力。

相关问题

element图片上传功能

可以使用HTML5的File API来实现element图片上传功能。具体实现可以参考以下代码：

HTML部分：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :auto-upload="false"
      list-type="picture-card">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

JS部分：

<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: []
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    beforeUpload(file) {
      this.fileList.push(file);
      return false;
    }
  }
};
</script>

这段代码使用了element-ui的Upload组件，通过设置action属性指定上传的地址，通过设置before-upload属性来实现手动上传，通过设置on-preview属性和on-remove属性来实现预览和删除功能。

vue的element图片上传

使用Vue的element图片上传是通过调用上传接口成功后，从接口中获取图片的附件信息，即图片的地址（attUrl）和ID（atta），然后将这些信息push到checkBaseForm.vehiCheckDetails中进行遍历展示。可以通过v-for指令遍历checkBaseForm.vehiCheckDetails数组，使用el-col组件设置每个图片的样式和布局，并将图片的地址绑定到el-image组件的src属性上，使用el-icon-delete图标作为删除图片的按钮。在点击删除图标的事件处理函数中，可以进行图片的删除操作。