element-ui中使用upload組件獲取上傳文件信息

更新時(shí)間：2023年07月18日 16:01:47 作者：考拉菜鳥

這篇文章主要介紹了element-ui中使用upload組件獲取上傳文件信息方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

1.使用htttp-request自定義上傳

在這里插入圖片描述

使用element-ui中的上傳組件，upload，這個(gè)默認(rèn)發(fā)送post請(qǐng)求，

在使用upload組件自動(dòng)攜帶的請(qǐng)求方式發(fā)送

action->請(qǐng)求的url
on-success->請(qǐng)求發(fā)送成功的鉤子–方法function(response, file, fileList)默認(rèn)參數(shù)3個(gè)
auto-upload->是否在選取文件后立即進(jìn)行上傳,默認(rèn)是true(選取文件即上傳)
name->上傳的文件字段名,默認(rèn)值file,后臺(tái)有時(shí)候需要發(fā)送別的字段名如image就這修改
data->上傳時(shí)附帶的額外參數(shù)object
disabled->是否禁用,默認(rèn)false
http-request->覆蓋默認(rèn)的上傳行為，可以自定義上傳的實(shí)現(xiàn)–方法(當(dāng)請(qǐng)求方式不為post可以自定義方式)

下面是兩個(gè)例子

1.使用upload默認(rèn)請(qǐng)求方式post發(fā)送提交圖片請(qǐng)求

后臺(tái)要求文件字段image

在這里插入圖片描述

在文件上傳成功后，可以從response的data屬性獲取圖片在服務(wù)器上的路徑，文件的具體信息在file.raw中

在這里插入圖片描述

2.使用upload上傳文件，發(fā)送patch請(qǐng)求數(shù)據(jù)

需要使用http-request鉤子由于覆蓋了其默認(rèn)請(qǐng)求，updateImg中異步請(qǐng)求攜帶了路徑，action中就隨便放了個(gè)網(wǎng)址，action是必傳參數(shù)

在這里插入圖片描述

http-reques鉤子有個(gè)默認(rèn)參數(shù),val.file可以獲取文件數(shù)據(jù)信息

在這里插入圖片描述

2.使用手動(dòng)上傳

需求背景

有個(gè)form表單，通過上傳組件獲取上傳文件信息，點(diǎn)擊彈窗的確定按鈕后，接口統(tǒng)一進(jìn)行上傳;

限制上傳zip類型文件，不超過10M，限制選擇1個(gè)zip包

在這里插入圖片描述

<!-- 文件上傳-->
<el-form :rules="rules" :model="dataForm" ref="dataForm" label-width="150px" @submit.native.prevent>
      <el-form-item label="名稱：" prop="name">
        <el-input type="text" v-model.trim="dataForm.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="文件：" prop="file" >
        <el-upload
            class="upload-import"
            ref="uploadImport"
            action="https://baidu.com/" <!-- 手動(dòng)上傳, action隨便給了個(gè)地址-->
            :on-remove="handleRemove"
            :file-list="fileList"
            :limit="1" <!-- 限制上傳數(shù)量-->
            :on-change="handleChange"
            :auto-upload="false"	<!-- 關(guān)閉自動(dòng)上傳-->
            accept="application/zip,.zip">  <!-- 設(shè)置接收的文件類型-->
            <!-- el-upload組件,在手動(dòng)上傳時(shí),禁用按鈕外, 還需要設(shè)置    :disabled="hasFile"   為true禁用該組件,會(huì)導(dǎo)致上傳列表也被禁用,無法刪除,因此使用v-show,文件數(shù)量為1時(shí),顯示禁用的的按鈕, slot不綁定trigger事件 --> 
          <el-button v-show="!hasFile" slot="trigger" size="small" type="primary" >選取文件</el-button>
          <el-button v-show="hasFile"  size="small" type="primary" disabled>選取文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上傳zip文件，且不超過10M</div>
        </el-upload>
      </el-form-item>
 </el-form>
<script>
export default {
	data(){
		return {
			dataForm: {
	          name: '',
	          file: null
	        },
	        rules: {
	          name: [
	            {required: true, message: "請(qǐng)輸入名稱", trigger: "blur"},
	            {max: 50, message: "最長可輸入50個(gè)字符", trigger: "blur"},
	            {validator: isvalidatName, trigger: "blur" },
	          ],
	          file: [
	            {required: true, message: "請(qǐng)選擇上傳文件", trigger: "blur"},
	          ]
        },
        hasFile: false,
        fileList: []
	},
	methods: {
		 handleRemove(file, fileList) {
	        if (!fileList.length) {
	          this.hasFile = false;
	        }
	        this.dataForm.file = null;
	      },
	      handleChange(file, fileList) {
    	    if (fileList.length >= 2) {
	          return;
	        }
	        if (fileList.length === 1) {
	          this.hasFile = true;
	        }
	        this.dataForm.file = file;
	      },
	      //確定按鈕
	      onSureHandle(){
				this.$refs.dataForm.validate(valid => {
					if(valid){
						let dataPar = this.dataForm;
						let fdParams = new FormData();
						fdParams.append('name', dataPar.name);
						fdParams.append('file', dataPar.file.raw);
					axios.post('/interface/importProject', fdParams, {
							headers: {'Content-Type': 'multipart/form-data'},//定義內(nèi)容格式,很重要
							timeout: 20000,
						}).then(response => {
							//...some logic
						}).catch(err =>{})						
					}
				})
		  }
	}
}
</script>
      ```