element UI的Upload 自定义上传-Toy模板网

这篇具有很好参考价值的文章主要介绍了element UI的Upload 自定义上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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.方法合集

    // 导入附件data数据
      uploadFace: {
        //人员ID
        employeeId: null,
        // 是否显示弹出层（导入）
        open: false,
        // 弹出层标题（导入）
        title: "附件上传",
        //上传列表
        fileList: [],
        //上传文件
        files: null,
        // 设置上传的请求头部
        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(),
    },
  });
}

文章来源地址https://www.toymoban.com/news/detail-855426.html

到了这里，关于element UI的Upload 自定义上传的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！