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

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

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="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {

 data () {
  return {
      uploadAction: '',
      type:0,
      dir:null,
      sourceId:null,
      createrId:null,  //上传人员
      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;
     // 上传地址，this.$api.getJavaEndPoint()是自己配置的url开头
     if(this.sourceId){
       this.uploadAction = this.uploadAction+'&sourceId='+this.sourceId;
     }
  },
  // 移除图片
  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);
      }
    }
  },
  // 上传图片成功
  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>

2.详情显示图片

图片展示时，根据接口返回的数据(数据中有图片的url)处理图片字段，然后显示在页面即可

<template>
  <div>
    <p>图片：</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>

3.编辑图片

<template>
  <div class="grid-content bg-purple">
  <el-form-item label="图片" 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,  //上传人员
    }
  },
  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>

 

总结：element里有现成的文件上传的组件，但是需要配置服务器地址，还有是其他的一些改动，本文是具体的业务逻辑。

图片上传时，子组件返回图片的id，然后给后台返回对应的图片id。图片展示时，只需根据接口返回的路径展示即可。图片编辑时，根据具体的模块写入具体的来源id，this.uploadAction传参（比如监控中心就传某条监控中心的id）。