使用element-ui的Upload 上传文件-Toy模板网

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

使用Upload 进行文件上传

https://element.eleme.cn/#/zh-CN/component/upload

注：当文件和一些其他数据（姓名，年龄）进行一起上传时候可分为两种过程
第一种：单独的文件上传地址，上传完文件后，后端返回该文件的地址，前端将该地址同其他数据（姓名，年龄）再次上传。
第二种：文件和数据（姓名，年龄）同一个接口进行上。
本文采用的是第二种使用 var formData = new FormData(); 进行同时上传。
下面展示一些 内联代码片。

<template>
  <div>
      <el-dialog title="文件上传" :visible.sync="dialogFormVisible"  :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="文件" :label-width="formLabelWidth" prop="paramsFile">
          <el-upload
            ref="upload"
            class="upload-demo"
            action="customize"            //不设置上传地址，下方自定义上传
            :limit="1"                    //只能上传一个文件
            :file-list="fileList"         // 已上传的文件列表 前端页面可看到的
            :http-request="uploadFile"    // 覆盖默认的上传行为，可以自定义上传的实现
            :on-exceed="handleExceed"     //超出上传文件个数的钩子 可给与提示
            :on-remove="handleRemove"     // 移除文件列表的钩子(点击右边的x)
            :before-upload="handleUpload">  //上传文件之前的钩子（这里用来限制上传的文件类型）
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="版本名称" prop="versionName" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.versionName" placeholder="输入版本名称"></el-input>
        </el-form-item>
        <el-form-item label="版本号" prop="versionCode" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.versionCode" placeholder="输入版本号"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 添加数据
      ruleForm: {
        versionName: "", // 版本名称
        versionCode: "", //版本号
        paramsFile: "", //上传的文件
      },
       formData: "", // 初始化的上传
       fileList: [], //上传文件的列表
       dialogFormVisible: false, //添加的弹框
    }
  },
  methods:{
     // 添加确定事件
    submitForm(formName) {
      var formData = new FormData();
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          formData.append("file", this.ruleForm.paramsFile); //文件
          formData.append("versionName", this.ruleForm.versionName); //版本名称
          formData.append("versionCode", this.ruleForm.versionCode); //版本号
          let loading = this.$loading({
            lock: true,
            text: `提交中，请稍等`,
            // text:`提交中，请稍等${this.progressPercent}`,
            background: "rgba(0,0,0,0.5)",
          });
          try {
            let res = await uploadApp(formData);
            if (res.code == 200) {
              loading.close();
              this.dialogFormVisible = false;
              this.progressPercent = 100;
              this.$message({
                type: "success",
                message: "添加成功",
              });
              this.init();
              this.ruleForm.paramsFile = "";
              this.ruleForm.versionName = ""; //版本名称
              this.ruleForm.versionCode = ""; //版本号
              this.fileList = [];
            }
          } catch {
            console.log("error");
            loading.close();
            this.$message.warning(`新增失败`);
          }
        } else {
          console.log("error sumbit");
          // return false
        }
      });
    },
    // 自定义上传事件
    uploadFile(params) {
      console.log(params.file, "上传的文件");
      this.ruleForm.paramsFile = params.file;
    },
    // 超出上传文件个数的钩子
    handleExceed(file, fileList) {
      this.$message.warning(`只能上传一个文件`);
    },
    // 移除
    handleRemove(file, fileList) {
      console.log(file, "移除的文件");
      //  清空 上传的文件数据
      this.ruleForm.paramsFile = "";
      this.fileList = [];
    },
    // 上传文件之前的钩子（这里用来限制上传的文件类型）
    handleUpload() {},
  }
}
</script>

图例：
:on-remove=“handleRemove” // 移除文件列表的钩子(点击右边的x) uploadfile上传文件,elementui,upload,文件上传,vue.js,前端,elementui
:on-exceed=“handleExceed” //超出上传文件个数的钩子可给与提示
:file-list=“fileList” // 已上传的文件列表前端页面可看到的文章来源地址https://www.toymoban.com/news/detail-516947.html