vue el-upload上传文件

效果图：
在这里插入图片描述
方式一：提交按钮时才上传文件

/**
 * 封装图片上传方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function uploadImg(url, data) {
  return request({
    url: url,
    data: data,
    headers: {
      'Content-Type':
        'multipart/form-data',
    },
    method: 'post',
  })
}

import { uploadImg } from '@/utils/https.js'

export function uploadImgs(data) {
  return uploadImg('/common/uploadFile',data)
}

import { uploadImgs } from '@/api/sysConfig'

<div style="display:flex;justify-content: center;position: relative;left:-40px;top:-35px">
        <el-form label-width="120px">
          <el-form-item label="网站LOGO：" prop="LogoImg">
            <el-upload
              drag
              :limit="1"
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture"
              :http-request="modeUpload"
              :file-list="fileList"
              :on-remove="handleRemove"
            >
              <img v-if="currentImgUrl" :src="currentImgUrl" class="avatar">
              <i v-else class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
              <div
                slot="tip"
                class="el-upload__tip"
              >只能上传jpg/png文件，且不超过{{ 200 }}kb</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div style="display: flex;justify-content:center;align-items:center">
        <div style="padding-bottom:15px;">
          <el-button size="medium" type="success" @click="handleSubmit">提交</el-button>
        </div>
      </div>

  data() {
    return {
      // currentImgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      currentImgUrl: '', // 当前Logo图片地址
      fileItem: {}, // 正在上传的图片
      fileList: [], // 上传图片的文件列表
    }

methods: {
    handleRemove(file, fileList) {
      console.log('移除文件触发:', file, fileList)
    },
    modeUpload(item) {
      this.fileItem = item.file // 获取要上传的文件
    },
        // “提交”按钮 提交表单事件
    handleSubmit() {
      const isSearch = this.$refs.editFormRef.checkFrom() // 检测表单必填的是否都填了
      // 如果都填写了
      if (isSearch) {
        console.log('图片数据:', this.fileItem)
        const fd = new FormData()
        fd.append('file', this.fileItem) // file为与后端约定的数据的key
        let token= 'aaaaaaaaaaaaa'
        fd.append('Authorization', token) // 我的接口需要这个token参数，根据实际接口需要进行参数调整
        uploadImgs(fd).then((response) => {
          console.log('接口返回:', response.data)
          if (response.data.code === 200) {
            alert('上传成功', 'warning')
          } else {
            // 上传失败
          }
        })
      }
    },

方式二：上传文件时直接传接口
去掉提交按钮，改一下modeUpload函数：

modeUpload(item) {
      this.fileItem = item.file // 获取要上传的文件
      const fd = new FormData()
        fd.append('file', this.fileItem) // file为与后端约定的数据的key
        fd.append('Authorization', token) // 我的接口需要这个token参数，根据实际接口需要进行参数调整
        uploadImgs(fd).then((response) => {
          console.log('接口返回:', response.data)
          if (response.data.code === 200) {
            alert('上传成功', 'warning')
          } else {
            // 上传失败
          }
        })
    },

vue el-upload上传文件

悦读