Element-ui upload 手动上传文件

element 手动上传

（随手一发，可以拿过来就用，不做解释看不懂的可以照搬，👇代码可复制👇）

<div>
 <el-upload
   class="upload"
   ref="upload"
   action="string"
   :file-list="fileList"
   :auto-upload="false"
   :http-request="uploadFile"
   :on-change="handleChange"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
   multiple="multiple"
 >
  <el-button
   slot="trigger"
   size="small"
   @click="delFile"
   class="chaxuns fontSizes"
  >选取文件</el-button>
  <div class="upfile">
   <el-button
     style="margin-left: 10px;"
     size="small"
     type="success"
     class="chaxuns fontSizes"
     @click="submitUpload"
   >上传文件</el-button>
  </div>
 </el-upload>          
</div>

    // 选取文件
    delFile() {
      this.fileList = [];
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    uploadFile(file) {
      this.formData.append("file", file.file);
    },
    submitUpload() {
      const formData = new FormData();
      formData.append("file", this.fileList[0].raw);
      // ↓后端请求接口↓
      upload(formData).then(res => {
        if (res.data.length === 0) {
          this.$message.warning("上传失败")
          this.fileList = [];
        } else {
          this.$message.success("上传文件成功")
          this.fileList = [];
        }
      })
    },

另外有的是：

import axios from 'axios'
let file = document.getElementById('fileInput').files[0] // 获取要上传的文件
let formData = new FormData() // 创建FormData对象
formData.append('file', file) // 添加文件到formData对象
axios.post('/upload', formData).then(response =>{
console.log(response)
})

还有个一个参考

https://www.freesion.com/article/4041384361/

效果图如下：

INDEX.VUE：

<el-form ref="importList" :model="importList" label-position="left" label-width="100px"
                   style="width:70%;margin-left:50px;">
  <el-form-item label="系统名称：" prop="sysName">
    <el-input v-model="importList.sysName" :disabled="true" placeholder="" size="mini"
              style="width: 90%"/>
  </el-form-item>
  <el-form-item label="资源名称：" prop="resName">
    <el-input v-model="importList.resName" :disabled="true" placeholder="" size="mini"
              style="width: 90%"/>
  </el-form-item>
  <el-form-item label="资源项名称：" prop="resItemName">
    <el-input v-model="importList.resItemName" :disabled="true" placeholder="" size="mini"
              style="width: 90%"/>
  </el-form-item>
  <el-form-item label="附件：" prop="file">
    <el-upload
      class="upload-demo"
      ref="upload"
      multiple
      action=""
      :on-change="fileChange"
      :on-remove="removeFile"
      :file-list="fjLists"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    </el-upload>
  </el-form-item>
</el-form>

METHODS方法：

//on-change：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
fileChange(file, fileList) {
  let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)//如果文件名重复
  if (existFile) {
    this.$message.error('当前文件已经存在!');
    fileList.pop()
  }
},
//on-remove：文件列表移除文件时的钩子
removeFile(file, fileList) {
  this.fjLists = fileList//此处fileList为删除文件后，剩余的文件
},
//保存上传
saveFile() {
   let {uploadFiles} = this.$refs.upload
   this.fileData = new FormData();
   uploadFiles.forEach(item => {
     if (item.lastModified) {
       this.fileData.append('file', item)
     }
   })
  // 此时所有的钩子已经执行完了fileData 中存的是通过校验的数据
  // 此时再调用接口上传该数据
  let config = {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }
  subFile(this.fileData, config).then(res => {
    this.diaFile = false
    //-----可写保存成功后执行的操作，此处省略
    this.fjLists = []//清空
  }).catch((res) => {
   //-----可写保存失败后执行的操作，此处省略
    this.diaFile = false
  })
},
//取消
cancelUploadFile() {
 this.diaFile = false//关闭弹窗
 this.importList = {//清空表单其他项
   sysName: '',//系统名称
   resName: '',//资源名称
   resItemName: '',//资源项名称
   fjFileList: ''//文件名列表
 }
 this.fjLists = []
}

备注：

1.subFile为dataReport.js中定义好的接口方法

export function subFile(data) {
  return request({
    url: 'api/dataReporting/uploadFile',
    method: 'post',
    data
  })
}
export defalut{subFile}

附带一个上传和后面的按钮放一行的案例