前言

一，图片上传

1、

<template>
   <el-upload            
            :action="uploadURL"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :headers="headerObj"
            list-type="picture"
            :on-success="handleSuccess"
            >
            <el-button size="small" type="primary">点击上传</el-button>    
</template>
export default {
    data() {
        return {
        	  // 图片上传的地址 
            uploadURL:"http://127.0.0.1:8888/api/private/v1/upload",
            picPreviewPath: '',
            // 图片预览对话框
            previewDialogVisible: false,
            addForm:{                 
                  // 图片的数组
                 pics: []              
            },
        	}
        },
        methods:{
         // 处理图片预览
      handlePreview (file) {
      this.picPreviewPath = file.response.data.url
      this.previewDialogVisible = true
      },
      // 处理移除图片的操作
      handleRemove (file) {
        // 1.获取将要删除图片的临时路径
        const filePath = file.response.data.tmp_path
        // 2.从pics数组中，找到图片对应的索引值
        const i = this.addForm.pics.findIndex(x => x.pic === filePath)
        // 3.调用splice方法，移除图片信息
        this.addForm.splice(i, 1)
      },
      // 监听图片上传成功事件
      handleSuccess (response) {
        // 1.拼接得到一个图片信息对象 临时路径
        const picInfo = { pic: response.data.tmp_path }
        // 2.将图片信息对象，push到pics数组中
        this.addForm.pics.push(picInfo)
      }
        }
  }