element ui upload 手动上传文件，传多个参数

最新推荐文章于 2024-08-29 07:30:44 发布

Igiveufireworks

最新推荐文章于 2024-08-29 07:30:44 发布

阅读量1.8k

点赞数 1

文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/igiveufireworks/article/details/130503285

版权

需求：在弹窗内部上传文件，限制传1个文件，点击上传文件按钮不会上传，点击确定键再上传。

html：

auto-upload设置为false，在选取文件后不立即进行上传。

    <el-dialog
      class="import-dialog"
      :visible.sync="showUpload"
      title="导入文件"
      width="600px"
      :show-close="true"
      destroy-on-close
      append-to-body
    >
      <el-form ref="form" class="px-16 matterDetail-block" :model="form"
        label-width="180px"
        label-position="center"
        :rules="rules"
      >
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="上传文件" prop="filesId">
              <el-upload
                ref="fileUpload"
                :action="`${baseURI}/importData`"
                :headers="headers"
                :file-list="fileList"
                :on-change="handleChange"
                :before-upload="handleBeforeUpload"
                :on-success="fileUploadSuccess"
                :on-error="handleUploadError"
                :on-exceed="handleExceed"
                :on-remove="fileRemove"
                accept=".xlsx"
                :auto-upload="false"
                :limit="1"
              >
                <el-button icon="el-icon-upload2">
                  点击上传
                </el-button>
                <div slot="tip" class="el-upload__tip">单个文件请勿超过20M</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="upload">确定</el-button>
        <el-button @click="showUpload = false">取消</el-button>
      </template>
    </el-dialog>

js：点击确认时再调用后端上传接口

data() {
    return {
      form: {
        filesId: ''
      },
      projectId: '', // 传参
      showUploadProblem: false,
      fileList: [],
      rules:{ // 校验规则
        filesId: [
          { required: true, message: '请上传文件', trigger: 'blur' },
        ]
      },
    }
}

    handleChange(file, fileList) {
      this.fileList = fileList;
      this.form.filesId = this.fileList[0].raw.uid
    },
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件大小
      const isLt = file.size / 1024 / 1024 < 20;
      if (!isLt) {
        this.$message.error(`上传文件大小不能超过20MB!`);
        return false;
      }
      return true;
    },
    // 上传成功
    fileUploadSuccess(res) {
      this.$message.success('上传成功');
    },
    // 文件个数超出
    handleExceed() {
      this.$message.error('只允许上传单个文件');
    },
    // 上传失败
    handleUploadError() {
      this.$message.error('上传失败, 请重试');
    },
    fileRemove(file, fileList) {
      if (file.status === 'success') {
        const id = file?.id || file.response?.id;
        const arr = this.form.filesId.split(',');
        const index = arr.findIndex((item) => item === id);
        arr.splice(index, 1);
        this.form.filesId = arr.join(',');
      } else {
        // 删除（多个文件时）
        // let uploadFiles = this.$refs.fileUpload.uploadFiles
        // for (var i = 0; i < uploadFiles.length; i++) {
        //   if (uploadFiles[i]['url'] == file.url) {
        //     uploadFiles.splice(i, 1)
        //   }
        // }
        // this.$refs.fileUpload.clearFiles()
        // 限制单个文件时
        this.fileList = fileList;
        this.form.filesId = this.fileList[0]?.raw.uid
      }
    },
    upload() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 传参为FormData格式
          let formData = new FormData();
          formData.append('file', this.fileList[0].raw); // file文件
          formData.append('projectId', this.projectId)
    
          if (this.form.filesId !== '') {
            // 第一种ref提交 数据在el-upload中 :data={projectId:projectId, file:fileList[0].raw} 配置
		    // this.$refs.fileUpload.submit();
		    // 第二种：axios 自定义提交
            importData(formData).then((res) => {
              this.$message.success('上传文件成功')
              this.showUpload = false
              this.fileList = []; // 清空
            })
            .catch(() => {
              this.$message.error("上传失败，请重新上传")
              this.fileList = [];
            })
          } else {
            this.$message.warning('请上传文件')
          }
        }
      })
    },

axios请求：

export function importData(files) {
  return request({
    url: '/importData',
    method: 'post',
    data: files
  });
}