Main page display section

<template>
    <div class="image-thumbnail">
        <el-upload
                ref="elUpload"
                action=""
                list-type="picture-card"
                :auto-upload="true"
                :http-request="uploadSectionFile"
                :on-remove="handleRemove"
        >
            <i slot="default" class="el-icon-plus"/>
            <div slot="file" slot-scope="{file}">
                <el-image class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <i class="el-icon-zoom-in"/>
                    </span>
                    <span v-if=! "" disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                        <i class="el-icon-download"/>
                    </span>
                    <span v-if=! "" disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <i class="el-icon-delete"/>
                    </span>
                </span>
            </div>
        </el-upload>
        <! -- Image preview -->
        <el-image-viewer :z-index="2002" v-if="showViewer" :on-close="closeViewer" :url-list="[dialogImageUrl]"/>
    </div>
</template>

<script>
  import {imageUpload} from '@/api/business/common';
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer';

  export default {
    name: 'imageThumbnail'.components: {ElImageViewer},
    data() {
      return {
        dialogImageUrl: ' '.fileList: [].disabled: false.showViewer: false.// Display the viewer}},methods: {
      / / delete
      handleRemove(file) {
        let uploadFiles = this.$refs.elUpload.uploadFiles;
        uploadFiles.forEach((value, index) = > {
          if (value.uid === file.uid) {
            uploadFiles.splice(index, 1)
            this.fileList.splice(index, 1)}})},// Large image preview
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.showViewer = true;
      },
      // Download the image
      handleDownload(file) {
        let a = document.createElement('a');
        a.download = file.name;
        a.href = (file.url);
        a.click();
      },
      // Rewrite the upload
      uploadSectionFile(params) {
        const file = params.file,
            fileType = file.type,
            isImage = fileType.indexOf('image')! = = -1,
            isLt2M = file.size / 1024 / 1024 < 2;
        // There are routine inspections depending on the requirements of the project
        if(! isImage) {this.$message.error('Upload only PNG, JPG, GIF! ');
          return;
        }
        if(! isLt2M) {this.$message.error('Upload only images smaller than 2M');
          return;
        }
        // Data format according to background requirements
        const form = new FormData();
        // File object
        form.append('files', file);
        // This example focuses on adding specific attributes at request time, so override the default action with your own method
        // form.append("clientType", 'xxx');
        // The request method for project encapsulation is briefly described below
        imageUpload(form).then(res= > {
          // Handle situations on your own
          if (res.code === 200) {
            this.fileList.push(res.data[0])}else {
            this.$message.warning(res.message);
          }
        }).catch(() = > {
          // xxx
        });
      },
      / / close
      closeViewer() {
        this.showViewer = false; ,}}};</script>

<style lang="scss" scoped>
    .image-thumbnail {

    }
</style>
Copy the code

interface

export function imageUpload(data) {
  return request( {
    url: '/file/upload'.method:'POST'.headers: {'content-type': 'multipart/form-data'},
    data
  });
}
Copy the code

Effect:

Display effect

Operating functions

Download function

Preview function