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）。