elementui上传图片

怎样在后端获取图片的URL？

要在后端获取上传图片的URL，你需要处理前端上传图片的请求并将图片保存到服务器。通常，你需要使用一个文件上传组件（比如vue-upload-component）来处理前端的上传请求。一旦图片被上传，就可以将其保存到服务器的某个目录中，并获取其URL。在Node.js中，你可以使用multer中间件解析上传文件并访问req.file来获取上传的文件信息。然后，你可以使用Node.js的fs模块将文件保存到服务器并返回其URL。通过将这个URL返回给前端，前端就可以访问该图片。

相关问题

elementui 上传图片

ElementUI 提供了一个 `el-upload` 组件来实现图片上传功能，以下是一个简单的示例：

<template>
  <el-upload
    class="upload-demo"
    action="//jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :file-list="fileList"
    :auto-upload="false"
    list-type="picture"
    :headers="{'Authorization': token}"
    :data="{userId: userId}"
    :multiple="true"
    :limit="3"
    :on-exceed="handleExceed"
    :show-file-list="false"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      token: 'your_token',
      userId: 'your_userId'
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }

      return isJPG && isLt2M;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 ${this.limit} 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`);
    }
  }
}
</script>

<style>
.upload-demo {
  margin-top: 20px;
}
</style>

上面的示例中，我们通过配置 `el-upload` 组件的不同属性来实现以下功能：

- `action`：上传图片的接口地址
- `on-preview`：点击预览图片时的回调函数
- `on-remove`：点击删除图片时的回调函数
- `on-success`：图片上传成功时的回调函数
- `before-upload`：上传图片之前的校验函数
- `file-list`：已上传的图片列表
- `auto-upload`：是否自动上传
- `list-type`：文件列表的类型，这里设置为 `picture`，表示只显示图片
- `headers`：请求头信息
- `data`：上传图片时需要携带的参数
- `multiple`：是否支持多选
- `limit`：限制上传图片的数量
- `on-exceed`：超过上传图片数量限制时的回调函数
- `show-file-list`：是否显示文件列表

以上是 ElementUI 实现上传图片的基本示例，你可以根据实际需求来配置组件的不同属性。

elementui上传图片回显

ElementUI提供了一个Upload组件用于上传文件，上传成功后可以通过设置response属性来获取上传成功后的信息，并将其展示在页面上。

具体步骤如下：

1. 在HTML中添加Upload组件，并设置action属性为上传接口的URL。

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :auto-upload="false"
    :list-type="'picture-card'"
    :file-list="fileList">
    <i class="el-icon-plus"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

2. 在data中添加fileList属性，用于保存上传成功后的文件信息。

data() {
  return {
    fileList: []
  }
}

3. 在methods中添加handleSuccess方法，用于处理上传成功后返回的数据。

methods: {
  handleSuccess(response, file, fileList) {
    this.fileList.push({
      name: file.name,
      url: response.url
    })
  }
}

4. 在上传成功后，将上传成功的图片展示在页面上。

<el-col :span="6" v-for="item in fileList" :key="item.name">
  <div class="image">
    <img :src="item.url" alt="">
  </div>
</el-col>

完整代码如下：

<template>
  <div class="upload-demo">
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :auto-upload="false"
      :list-type="'picture-card'"
      :file-list="fileList">
      <i class="el-icon-plus"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-row>
      <el-col :span="6" v-for="item in fileList" :key="item.name">
        <div class="image">
          <img :src="item.url" alt="">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      this.fileList.push({
        name: file.name,
        url: response.url
      })
    }
  }
}
</script>

<style scoped>
.upload-demo .el-upload__tip {
  margin-top: 10px;
}
.upload-demo .image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin-bottom: 20px;
}
.upload-demo .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>