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)
})

el-upload自定义手动上传方法

<el-upload
    ref="upload"
    action
    :accept="acceptFile"
    :file-list="fileList"
    :show-file-list="false"
    :on-change="handleChange"
    :auto-upload="false"
>
  <el-button class="btn-define" slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
<el-button type="primary" @click="saveData">保存</el-button>
 
 // 选择文件变化后
handleChangeQuitUpload(e) {
    this.form.uploadFile=e.raw;//上传的文件
},
 
data() {
    return {
    	form:{
    		uploadFile:null,
    	},
    	acceptFile:['jpg','zip','png']
    }
}
 
methods:{
	saveData(){
	  //选取了文件则上传
	  if(this.form.uploadFile){
	  	this.uploadHttpRequest();
	  }
	}
	  //上传执行的方法
    async uploadHttpRequest() {
      const formData =  new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
      formData.append('file', this.form.uploadFile) //添加文件对象
      //发起上传请求...
    },
}

还有个一个参考

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}

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

手动上传这里还特别需要关注2个绑定的方法，一个是on-change,一个是on-remove

一利用on-change方法，把上传的文件添加到自定义的数组中；

二利用on-remove方法，把上传的文件移除自定义的数组中；

我这里只容许上传一个文件，在el-upload组件中添加了limit=1，所有upFile没有使用数组，如果可以考虑upFile为数组，on-change方法内部为，upFile.add(file),js好像是push哦；

在on-remove方法中对upFile进行删除。

我这里因为只有1个，所有直接对upFile重新赋值为空；如果是数组，需要在upFile中删除对应的文件；

最后上传方法中构造formData(),添加文件和其他参数的请求。

let upload_fengongsi_hetongjia = () => {
	//ElMessageBox.alert("query_fengongsi_hetongjia_shuliang");
	if(qianduanFengongsiHetongjiaValue.value === "") {
		ElMessageBox.alert("没有选择对应分公司");
		return;
	}
	let config = {
		//formData  提交请求头有两种 multipart/form-data  和 application/x-www-form-urlencoded
		// multipart/form-data   用于type=file 的input提交
		headers: {
			"Content-Type": "multipart/form-data"
		}
	};
	let formData =  new FormData();
	//参数
	console.log(" upload_fengongsi_hetongjia()     upFile   qianduanFengongsiHetongjiaValue    ");
	console.log(upFile);
	console.log(qianduanFengongsiHetongjiaValue.value);
    formData.append("chengshi",qianduanFengongsiHetongjiaValue.value);
	formData.append("file",upFile.raw);
	//console.log(uploadFengongshiHetongjiaFileLists.value);
	axios.post(baseUrl+
		"xibiaoqianduan/uploadFengongsiHetongjiaFile",
		formData,
		config
	).then((res)=>{
		console.log(res);
		console.log(res.data.data);
	}).catch((err,res)=>{
		console.log(err);
		console.log(res);
	});
	//uploadFengongshiHetongjiaFileLists.value = [];
}

其他

:on-preview="onPreview()"
								:on-remove="onRemove()"
								:on-success="onSuccess()"
								:on-error="onError()"
								:on-progress="onProgress()"
								:on-change="onChange()"
								:on-exceed="onExceed()"
								:before-upload="beforeUpload()"
								:before-remove="beforeRemove()"

let onPreview = () => {
    ElMessageBox.alert("onPreview");
}
let onRemove = () => {
    ElMessageBox.alert("onRemove");
}
let onSuccess = () => {
    ElMessageBox.alert("onSuccess");
}
let onError = () => {
    ElMessageBox.alert("onError");
}
let onProgress = () => {
    ElMessageBox.alert("onProgress");
}
let onChange = () => {
    ElMessageBox.alert("onChange");
}
let onExceed = () => {
    ElMessageBox.alert("onExceed");
}
let beforeUpload = () => {
    ElMessageBox.alert("beforeUpload");
}
let beforeRemove = () => {
    ElMessageBox.alert("beforeRemove");
}





on-preview	点击文件列表中已上传的文件时的钩子	
Function
—
on-remove	文件列表移除文件时的钩子	
Function
—
on-success	文件上传成功时的钩子	
Function
—
on-error	文件上传失败时的钩子	
Function
—
on-progress	文件上传时的钩子	
Function
—
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	
Function
—
on-exceed	当超出限制时，执行的钩子函数	
Function
—
before-upload	上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。	
Function
—
before-remove	删除文件之前的钩子，参数为上传的文件和文件列表， 若返回 false 或者返回 Promise 且被 reject，则停止删除。	
Function
—