快捷導(dǎo)航

elementUI中el-upload文件上傳的實(shí)現(xiàn)方法

更新時(shí)間：2024年11月06日 10:07:12 作者：weixin_48327393

ElementUI的組件支持多種事件鉤子,如http-request、before-upload和on-change,以實(shí)現(xiàn)自定義文件上傳處理,這篇文章主要介紹了elementUI中el-upload文件上傳的實(shí)現(xiàn)方法,需要的朋友可以參考下

使用elementUI中的el-upload組件來(lái)實(shí)現(xiàn)文件上傳

http-request：允許使用自定義的方法來(lái)處理文件上傳的請(qǐng)求。

before-upload：是Element UI的<el-upload>組件的一個(gè)鉤子函數(shù)，它在上傳文件之前被調(diào)用。你可以在這個(gè)鉤子中進(jìn)行一些自定義的校驗(yàn)或者操作。例如設(shè)置上傳文件大小

on-change：on-change 事件在文件狀態(tài)改變時(shí)觸發(fā)。這里的文件狀態(tài)通常指上傳進(jìn)度的變化或者上傳操作的成功/失敗。on-change 事件的處理函數(shù)會(huì)接收一個(gè)參數(shù)，該參數(shù)是一個(gè)對(duì)象，包含了文件的相關(guān)信息，如 file（文件對(duì)象），fileList（文件列表），name（事件名稱）等。

<span>
<el-form-item label="文件地址：" prop=""/>
</span>
<el-upload
    ref="upload"
    :file-list="formFileUploadForm"
    :http-request="handleUploadForm"
    :on-change="handleChange"
    :before-upload="beforeUpload"
    :show-file-list="false"
    :auto-upload="false"
    class="upload-demo"
    action=""
>
    <el-input v-model = 'uploadForm.file' type="primary" readonly styele="width:240px;line-height:0px;padding-right:20px">
    <el-button size="mediumTwo" type="primary">預(yù)覽</el-button>

</el-upload>

handleUploadForm(params){
    const formData = new FormData()
    formData.append('file',param.file)
    form.append('FileName','')
    axios({
        url:'',
        methods:'post',
        headers:{'Content-Type':'multipart/form-data'},
        data:formData
    }).then(res=>{
        if(res.data.code==200){
            return this.$pop(res.data.data,'success',this)
        }else{
            return this.$pop(res.data.message,'warning',this)
        }
    }).catch(err=>{
        return this.$pop(error,'error',this)
        }
    })
}

beforeUpload(file) {
      console.log('文件上傳前的校驗(yàn)', file);
      // 這里可以進(jìn)行一些文件的校驗(yàn)，比如文件類型，文件大小等
      // 返回 false 或者返回一個(gè) Promise 對(duì)象，Promise 對(duì)象 reject 時(shí)不會(huì)上傳文件
      return new Promise((resolve, reject) => {
        if (file.size / 1024 / 1024 > 2) {
          this.$message.error('文件大小不能超過(guò) 2MB!');
          reject(new Error('文件大小不能超過(guò) 2MB!'));
        } else {
          resolve(file);
        }
      });
    },

 handleChange(response, file, fileList) {
      if (response.status === 'success') {
        console.log('文件上傳成功', file);
      } else if (response.status === 'error') {
        console.log('文件上傳失敗', file);
      }
    }

總結(jié)

到此這篇關(guān)于elementUI中el-upload文件上傳實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)el-upload文件上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: