?1.組件布局

      
      <el-upload
        class="upload-demo"
        ref="upload"
        :headers="uploadFace.headers"
        :action="uploadFace.url"
        :auto-upload="false"
        :limit="1"
        :on-success="handleAvatarSuccess"
        :on-remove="handleRemove"
        :file-list="uploadFace.fileList"
        drag
        :http-request="handleFileUpload"
        accept=".jpg,.jpeg,.png,.pdf"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
        <div class="el-upload__tip" slot="tip">
          （支持文件類型<span style="color: #65b1ff">.jpg,.jpeg,.png,.pdf</span
          >）
        </div>
        <br />
        文件大小不能超過<span style="color: #65b1ff">30MB</span>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmImportFace">確 定</el-button>
        <el-button>取 消</el-button>
      </div>

?2.方法合集

    // 導(dǎo)入附件data數(shù)據(jù)
      uploadFace: {
        //人員ID
        employeeId: null,
        // 是否顯示彈出層（導(dǎo)入）
        open: false,
        // 彈出層標(biāo)題（導(dǎo)入）
        title: "附件上傳",
        //上傳列表
        fileList: [],
        //上傳文件
        files: null,
        // 設(shè)置上傳的請求頭部
        headers: { Authorization: "Bearer " + getToken() },
        // 上傳的地址
        url:
          process.env.VUE_APP_BASE_API +
          "url接口地址",
      },    

   



    /* 打開選取 */
    handleFace(row) {
      this.uploadFace.open = true;
      this.uploadFace.employeeId = row.id;
      this.uploadData = {
        id: this.uploadFace.employeeId,
      };
    },
    /* 列表刪除時 */
    handleRemove(file, fileList) {
      this.uploadFace.files = null;
      this.uploadFace.fileList = fileList;
    },

    /* 選取成功時 */
    handleAvatarSuccess(response, file, fileList) {
      this.uploadFace.files = file.raw;
      console.log(this.uploadFace.fileList);
    },

    // 處理文件上傳操作
    handleFileUpload(file) {
      const formData = new FormData();
      // 向 formData 對象中添加文件
      formData.append("id", this.uploadFace.employeeId);
      formData.append("file", file.file);
      faceInput(formData).then((result) => {
        if (result.code != 200) {
          return;
        }
        this.$message({
          message: "上傳成功",
          type: "success",
        });
        this.handleRemove()
        this.uploadFace.open = false;
      });
    },
    /* 確定上傳 */
    confirmImportFace() {
      this.$refs.upload.submit();
    },

?3.接口封裝

// 文件上傳
export function faceInput(formData) {
  return request({
    url: "url",
    method: "post",
    data: formData,
    headers: {
      "Content-Type": "multipart/form-data;boundary =" + new Date().getTime(),
    },
  });
}

文章來源地址http://www.zghlxwxcb.cn/news/detail-855426.html

到了這里，關(guān)于element UI的Upload 自定義上傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！