vue + element-ui 文件 图片上传功能的实现

直接贴代码

主要参数说明
有对应注释

<template>
  <div class="upload-container">
    <el-button icon='el-icon-upload' size="mini" :style="{background:color,borderColor:color}"
               @click=" dialogTrue" type="primary">上传图片
    </el-button>
    <el-dialog append-to-body :visible.sync="dialogVisible">
      <el-upload class="editor-slide-upload"
                 :action="baseUrl"
                 :data="dataObj"
                 :headers="uploadHeaders"
                 :multiple="true"
                 :file-list="fileList"
                 :show-file-list="true"
                 list-type="picture-card"
                 :on-remove="handleRemove"
                 :on-success="handleSuccess"
                 
        :class="{'demo-httpRequestImg':httpRequestImg}"
                 :before-upload="beforeUpload">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
  import {policy} from '@/api/oss'
const url = require('@/utils/upload.js')
  export default {
    name: 'editorSlideUpload',
    props: {
      color: {
        type: String,
        default: '#1890ff'
      }
    },
    data() {
      return {
        dialogVisible: false, // 组件的弹窗
        listObj: {},
        fileList: [],
        dataObj: {
          serverName: "图文详情", // 这里为上传图片需要的其他参数
          
        },
        baseUrl: process.env.BASE_API + '/api-file/files-anon', // 上传文件的路径
        uploadHeaders: {
        Authorization: "Bearer " + window.sessionStorage.getItem("token") || "", // 传递文件需要的请求头 一般包含token
      },
      
      httpRequestImg:false,//展示单个图片 目的是为了限制单次只能上传一个图片 
      }
    },
    methods: {
      dialogTrue() {
        this.dialogVisible = true
        this.httpRequestImg = false
      },
      checkAllSuccess() {
        return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
      },
      handleSubmit() {
        const arr = Object.keys(this.listObj).map(v => this.listObj[v])
        console.log(arr);
        this.$emit('successCBK', arr);
        this.listObj = {};
        this.fileList = [];
        this.dialogVisible = false;
      },
      handleSuccess(response, file,fileList) {
        let that = this
        console.log(response, '打印的成功', fileList, '打印的文件列表')
        const uid = file.uid;
        const objKeyArr = Object.keys(this.listObj)
        console.log(objKeyArr, '看看打印的objKeyArr', this.listObj, '打印的this.listObj')

       for (let i = 0;  i < objKeyArr.length; i++) {
          console.log(this.listObj[objKeyArr[i]], '打印的文件西永')
            this.listObj[objKeyArr[i]].url = response.url;
            this.listObj[objKeyArr[i]].hasSuccess = true;
        }

      },
      handleRemove(file) {
        // 删除文件 所用到的钩子
      this.httpRequestImg = false;
        const uid = file.uid;
        const objKeyArr = Object.keys(this.listObj);
        for (let i = 0, len = objKeyArr.length; i < len; i++) {
          if (this.listObj[objKeyArr[i]].uid === uid) {
            delete this.listObj[objKeyArr[i]];
            return
          }
        }
      },
      beforeUpload(file) {
		// 文件上传之前的钩子 没用到
      }
    },
    created() {
      console.log(url, '打印的url')
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .upload-container .editor-slide-upload{
    margin-bottom: 20px;
  }
  .demo-httpRequestImg{
    /deep/ .el-upload--picture-card{
        display: none;
    }
  }
</style>

实现较为复杂 实际上传比较简单