Business logic: when a module is added, a new picture is added. The details display also has a picture field. The editor can also edit the picture.

1. Upload pictures

The picture upload component returns an array of picture ids, and then passes the picture ID to the corresponding field in the parent component’s upload function.

The parent component:

<template>
  <div>
    <el-form-item label="Image" 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>Copy the code

Child components:

<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="small" type="primary"</el-button> </el-upload> </template> <script>export default {

 data () {
  return {
      uploadAction: ' '.type:0,
      dir:null,
      sourceId:null, createrId:null, // Upload person fileList: [], imgIdArr: [],}}, methods: {init(){
     var vm=this
     this.imgIdArr = [];
     this.uploadAction = this.$api.getJavaEndPoint() + 'web/oss/jqupload? type='+this.type+'&dir='+this.dir+'&createrId'+this.createrId; // Upload address, this.$api.getJavaendpoint () is the self-configured url startif(this.sourceId){
       this.uploadAction = this.uploadAction+'&sourceId='+this.sourceId; }}, // remove the image onRemove(file) {this.$api.sysFileDel(file.id, function (data) {
      
    });
    for (var i = 0; i < this.imgIdArr.length; i++) {
      var cur = this.imgIdArr[i];
      if(cur === file.id) { this.imgIdArr.splice(i--, 1); }}, // upload image successfully onSuccess(resp, file, fileList) {if (resp && resp.data.files && resp.data.files.length > 0) {
      for (var i = 0; i < resp.data.files.length; i++) {
        var cur = resp.data.files[i];
        this.imgIdArr.push(cur.id);
        file.id = cur.id;
      }
    }
    this.$emit('change',this.imgIdArr)
  },
 },

 created () {
   this.init()
 }
}
</script>

<style lang='css' scoped>

</style>
Copy the code

2. Details display pictures

Image display, according to the data returned by the interface (the data has the URL of the image) to process the image field, and then display it on the page

<template> <div> <p> Image: </p> <el-image v-for='item in urlList'
         :key='item.id'
         :src="item.url"
         style="width:200px"
       >
       </el-image>
  </div>
</template>

<script>

export default {
  data() {
    return {
      urlList: [],
    }
  },
  methods:{
    init(id){
     var vm = this;
     this.urlList=[]
      this.$api.ctrlCenterDetail({ obj: { id: id } }, function(data) {
        if(data.sysFiles.length>0){
          for(var i=0; i<data.sysFiles.length; i++){if(data.sysFiles[i].url){
              data.sysFiles[i].url=vm.$api.getPicPrefix()+data.sysFiles[i].url
              vm.urlList.push(data.sysFiles[i])
            }
          }
        }
        vm.msg = data
      });
      vm.detailDialogVisible = true
    }
  }
}
</script>Copy the code

3. Edit pictures

<template>
  <div class="grid-content bg-purple">
  <el-form-item label="Image" prop="img">
    <el-upload
      class="upload-demo"
      :action="uploadAction"
      :on-remove="onRemove"
      list-type="picture"
      :file-list="fileList"
      name="files[]"
    >
      <el-button size="small" type="primary"</el-button> </el-upload> </el-form-item> </div> </template> <script>export default {
  data() {
    return {
      fileList: [],
      uploadAction: ' '.type:0,
      dir:null,
      sourceId:null, createrId:null, // uploader}}, methods:{ init(id){ var vm = this this.fileList=[] this.sourceId=id this.uploadAction = this.$api.getJavaEndPoint() + 'web/oss/jqupload? type='+this.type+'&dir='+this.dir+'&createrId'+this.createrId+'&sourceId='+this.sourceId;
      var pop = this.fileList.pop();
      this.$api.ctrlCenterDetail({ obj: { id: id } }, function(data) {
        if (data.sysFiles.length>0) {
          for(var i=0; i<data.sysFiles.length; i++){if(pop){
              pop.url = vm.$api.getPicPrefix() + data.sysFiles[i].url;
              pop.id = data.sysFiles[i].id;
              vm.fileList.push(pop);
            }
            else{
              vm.fileList.push({id: data.sysFiles[i].id, url: vm.$api.getPicPrefix() + data.sysFiles[i].url});
            }
          }
        }
        vm.detailsInfo = data
        vm.editDialogVisible = true
      });
    },
    onRemove(file) {
      this.$api.sysFileDel(file.id, function (data) {
        
      })
    },
  }
}
</script>Copy the code


Summary: Element has an existing component for uploading files, but you need to configure server addresses and other changes. This article is the business logic.

When an image is uploaded, the child component returns the image ID and then returns the corresponding image ID to the background. When showing pictures, you only need to show them according to the path returned by the interface. When editing the image, write the specific source ID according to the specific module, this.uploadAction parameter (for example, the monitoring center passes a monitoring center ID).