Vue+element实现图片的上传与显示

原创

于 2019-12-07 17:46:39 发布 · 2.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #element #图片上传

本文介绍了如何在Vue项目中结合Element组件库实现图片上传、详情显示和编辑功能。通过自定义图片上传组件，接收返回的图片ID数组，并在父组件中处理图片字段。在详情展示阶段，根据接口返回的图片URL进行展示；编辑图片时，针对不同模块写入相应的来源ID。Element的文件上传组件虽然功能齐全，但需配置服务器地址和进行一些定制化修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务逻辑：某个模块新增时新增图片，详情显示也有图片字段，编辑也能对图片进行编辑。

1.图片上传

自己写了一个图片上传的组件，在父组件中引入即可，图片上传组件返回一个图片id的数组，然后在父组件的上传函数中把图片id传给对应的字段即可。

父组件：

<template>
  <div>
    <el-form-item label="图片" prop="img">
      <imageUpload v-on:change="change"/>
    </el-form-item>
  </div>
</template>

<script>
import imageUpload from '../../../components/imageUpload.vue'
export default {
  components: {
    imageUpload
  },
  data() {
    return {
      imgIdArr: [],
    }
  },
  methods:{
    change(data){
      this.imgIdArr=data
    },
  }
}
</script>

子组件：

<template>
  <el-upload
    class="upload-demo"
    :action="uploadAction"
    :on-remove="onRemove"
    :on-success="onSuccess"
    list-type="picture"
    :file-list="fileList"
    name="files[]"
  >
    <el-button size="sm