原生上传文件附件写法和即视查看上传进度过程

页面操作逻辑步骤，先点击选择文件，选择完成之后，确认上传就行了

<template>
	<el-button
        size="small"
        type=""
        @click="handleUploadFile"
        >选择文件el-button
      >
    <el-button type="primary" @click="handleAffirmFile">确认上传el-button>
	<input
        v-show="false"
        ref="uploadFile"
        type="file"
        @change="handleAddFiles"
      />
     <el-table
        border=""
        :data="tableFiles"
        style="margin: 10px 0"
      >
        <el-table-column label="序号" type="index" width="70">el-table-column>
        <el-table-column label="文件名" prop="fileName">el-table-column>
        <el-table-column label="上传进度" prop="percent">
          <template slot-scope="scope">
            {{ changeViewText(scope.row["percent"]) }}
          template>
        el-table-column>
        <el-table-column label="操作" width="140">
          <template scope="scope">
            <el-button
              type="text"
              @click="handleFileDel(scope.$index)"
              >删除el-button
            >
            <el-button
              type="text"
              @click="handleRowCheck(scope.row)"
              >查看el-button
            >
            <el-button
              type="text"
              @click="handleRowDownload(scope.row)"
              >下载el-button
            >
          template>
        el-table-column>
      el-table>
template>
<script>
export default {
	name:"file",
    data() {
      return {
        fileDownloadUrl: window.ELS.api + "/fileData/service/download", // 下载
      	fileDisplaydUrl: window.ELS.api + "/fileData/service/display",  // 查看，
      	tableFiles:[],// 附件表格数据
      };
    },
    methods: {
       changeViewText(num) {
      		const list = {
        	"-1": "上传失败",
        	0: "未上传",
        	100: "已上传",
      		}	;
      return list[num] || `${num}%`;
    },
    // 选择上传文件弹框
    	handleUploadFile() {
      	this.$refs.uploadFile.value = "";
      	this.$refs.uploadFile.click();
    },
	// 删除附件
        handleFileDel(index) {
      	this.tableFiles.splice(index, 1);
    },
    // 上传文件进度数据处理
        handleProgress(item) {
      return (event) => {
        if (event.lengthComputable) {
          item.percent = (event.loaded / event.total).toFixed(2) * 100;
        }
      };
    },
    // 确认上传
        handleAffirmFile() {
      	const requestList = this.tableFiles
        .filter((item) => item.isUpload == "0")
        .map((item) => {
          return this.handleRequestFiles({
            data: item.file,
            onProgress: this.handleProgress(item),
          });
        });
      	Promise.all(requestList)
        .then((res) => {
          this.handleRefresh(res);
        })
        .catch((err) => {
          this.showCloseFiles = true;
          this.$message.error(err.msg);
        });
    },
    // 处理调用的接口传参逻辑
        handleRequestFiles({ data, method = "post", onProgress = (e) => e }) {
      const that = this;
      return new Promise((resolve, reject) => {
        const formData = new window.FormData(); // 表单格式
        formData.append("file", data);
        const xhr = new window.XMLHttpRequest();
        xhr.open(method, that.upLoadUrl);
        xhr.upload.onprogress = onProgress;
        xhr.onreadystatechange = function (e) {
          if (this.readyState === 4 && this.status === 200) {
            const res = JSON.parse(this.response);
            if (res.code === "200") {
              resolve(res);
            } else {
              reject(res);
            }
          }
        };
        xhr.send(formData);
      });
    },
    // 上传完成后的函数调用，根据返回数据和本地的数据重新组合所需要的附件内容
     handleRefresh(resData = []) {
      const parentData = this.tableFiles.filter((item) => item.isUpload == "1");
      const files = resData.map((item) => {
        const { fileName, fileUrl, ...others } = item.data || {};
        return {
          ...others,
          fileName: fileName,
          isUpload: "1",
          percent: 100,
          url: `${window.ELS.api}/${fileUrl}`,
        };
      });
      this.tableFiles = [...parentData, ...files];
    },
    // 查看
        handleRowCheck(row) {
      window.open(`${this.fileDisplaydUrl}/${row.id}`);
    },
    // 下载
    handleRowDownload(row) {
      window.open(`${this.fileDownloadUrl}/${row.id}`);
    },
    // 选择文件返回的回调函数，可以处理一些文件限制
     handleAddFiles(event) {
      const files = event.target.files;
      const reg = /.(exe|cmd|sh|bat)$/;
      const regCompress = /.(rar|zip)$/;
      for (const item of files) {
        if (reg.test(item["name"].toLocaleLowerCase())) {
          return this.$message.error(
            this.$t("不允许上传.exe、.cmd、.sh、.bat格式文件")
          );
        } else {
          if (regCompress.test(item["name"].toLocaleLowerCase())) {
            if (item.size > 30 * 1024 * 1024) {
              return this.$message.error(this.$t("不允许上传超过30M的压缩包"));
            }
          } else {
            if (item.size > 10 * 1024 * 1024) {
              return this.$message.error(this.$t("不允许上传超过10M的文件"));
            }
          }
        }
        this.tableFiles.push({
          fileName: item.name,
          file: item,
          percent: 0,
          isUpload: "0",
        });
      }
    },
    },
}

script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180