快捷導(dǎo)航

自定義elementui上傳文件以及攜帶參數(shù)問(wèn)題

更新時(shí)間：2023年08月12日 16:00:30 作者：沃特艾文兒～

這篇文章主要介紹了自定義elementui上傳文件以及攜帶參數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

自定義elementui上傳文件以及攜帶參數(shù)

elementui提供了上傳文件的ui，可以比較方便，我們需要它來(lái)完成自定義上傳文件以及攜帶參數(shù)需要改寫(xiě)其中的一些方法來(lái)實(shí)現(xiàn)。

下面是一個(gè)簡(jiǎn)單的上傳標(biāo)簽

    <el-upload
        ref="upload"
        style="display: inline"
        drag
        action=""
        :before-upload="beforeUploadHandle"
        :http-request="handleUploadForm"
        :auto-upload="false"
        multiple
        :limit="1"
        :on-exceed="handleExceed">
      <el-link icon="el-icon-paperclip" type="primary">添加需要上傳的文件</el-link>
    </el-upload>

不自動(dòng)上傳

:auto-upload=“false”

限制上傳文件個(gè)數(shù)

:limit=“1”

上傳之前的校驗(yàn)

我們需要實(shí)現(xiàn)這個(gè)方法，來(lái)檢測(cè)上傳的合法性

:before-upload=“beforeUploadHandle”

上傳時(shí)需要攜帶參數(shù)

需要上傳的數(shù)據(jù)文件以及參數(shù)在這里來(lái)處理添加

:http-request=“handleUploadForm”

檢測(cè)添加文件是否超過(guò)限制

:on-exceed=“handleExceed”

手動(dòng)上傳

其中的upload對(duì)應(yīng)于上面的ref=“upload”，我們只需要給按鈕實(shí)現(xiàn)一個(gè)方法執(zhí)行此語(yǔ)句便可以實(shí)現(xiàn)自己點(diǎn)擊上傳

this.$refs.upload.submit();

具體實(shí)現(xiàn)

上傳限制以及上傳之前的校驗(yàn)不贅述，這里給出一個(gè)簡(jiǎn)單的demo。

上傳限制實(shí)現(xiàn)類(lèi)似，只是給出一些提示信息，file便是我們上傳的文件。

    beforeUploadHandle(file) {
      if (
          file.type !== "image/png" &&
          file.type !== "image/jpeg"
      ) {
        this.$message.error("只支持.jpg、.jpeg、.jpe、.png文件！");
        return false;
      }
    },

攜帶參數(shù)

handleUploadForm(param) {
      console.log(this.pid)
      let thisInfo = this
      let formData = new FormData()
      // 在formData中加入我們需要的參數(shù)
      formData.append('file', param.file)
    	formData.append('id', this.pid)
    // 向后端發(fā)送數(shù)據(jù)
      thisInfo.$axios.post('api/user/update_Info/', formData).then((res) => {
        if (res.status === 200) {
          thisInfo.$message.success('修改信息成功')
        } else {
          thisInfo.$message.success('修改信息失敗')
        }
        thisInfo.formFileList = []
        thisInfo.uploadFormFileList = []
      })
    }