BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 1c0d2e1e51bb45f6e90e156eacb1383813da2af2

Authored by YunaiV
1 parent 582fead4

v3.8.2 组件fileUpload支持多文件同时选择上传

Inline Side-by-side
Showing 2 changed files with 27 additions and 25 deletions
yudao-ui-admin/src/components/FileUpload/index.vue
  View file @1c0d2e1
1 1 <template>
2 2 <div class="upload-file">
3 3 <el-upload
  4 + multiple
4 5 :action="uploadFileUrl"
5 6 :before-upload="handleBeforeUpload"
6 7 :file-list="fileList"
... ... @@ -69,6 +70,8 @@ export default {
69 70 },
70 71 data() {
71 72 return {
  73 + number: 0,
  74 + uploadList: [],
72 75 baseUrl: process.env.VUE_APP_BASE_API,
73 76 uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
74 77 headers: {
... ... @@ -122,7 +125,7 @@ export default {
122 125 return false;
123 126 });
124 127 if (!isTypeOk) {
125   - this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
  128 + this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
126 129 return false;
127 130 }
128 131 }
... ... @@ -130,25 +133,33 @@ export default {
130 133 if (this.fileSize) {
131 134 const isLt = file.size / 1024 / 1024 < this.fileSize;
132 135 if (!isLt) {
133   - this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
  136 + this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
134 137 return false;
135 138 }
136 139 }
  140 + this.$modal.loading("正在上传文件，请稍候...");
  141 + this.number++;
137 142 return true;
138 143 },
139 144 // 文件个数超出
140 145 handleExceed() {
141   - this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
  146 + this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
142 147 },
143 148 // 上传失败
144 149 handleUploadError(err) {
145   - this.$message.error("上传失败, 请重试");
  150 + this.$modal.msgError("上传图片失败，请重试");
  151 + this.$modal.closeLoading()
146 152 },
147 153 // 上传成功回调
148   - handleUploadSuccess(res, file) {
149   - this.$message.success("上传成功");
150   - this.fileList.push({ name: res.fileName, url: res.fileName });
151   - this.$emit("input", this.listToString(this.fileList));
  154 + handleUploadSuccess(res) {
  155 + this.uploadList.push({ name: res.fileName, url: res.fileName });
  156 + if (this.uploadList.length === this.number) {
  157 + this.fileList = this.fileList.concat(this.uploadList);
  158 + this.uploadList = [];
  159 + this.number = 0;
  160 + this.$emit("input", this.listToString(this.fileList));
  161 + this.$modal.closeLoading();
  162 + }
152 163 },
153 164 // 删除文件
154 165 handleDelete(index) {
... ... @@ -158,7 +169,7 @@ export default {
158 169 // 获取文件名称
159 170 getFileName(name) {
160 171 if (name.lastIndexOf("/") > -1) {
161   - return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
  172 + return name.slice(name.lastIndexOf("/") + 1);
162 173 } else {
163 174 return "";
164 175 }
... ...
yudao-ui-admin/src/components/ImageUpload/index.vue
  View file @1c0d2e1
... ... @@ -133,7 +133,7 @@ export default {
133 133 this.uploadList = [];
134 134 this.number = 0;
135 135 this.$emit("input", this.listToString(this.fileList));
136   - this.loading.close();
  136 + this.$modal.closeLoading();
137 137 }
138 138 },
139 139 // 上传前loading加载
... ... @@ -154,36 +154,27 @@ export default {
154 154 }
155 155  
156 156 if (!isImg) {
157   - this.$message.error(
158   - `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
159   - );
  157 + this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
160 158 return false;
161 159 }
162 160 if (this.fileSize) {
163 161 const isLt = file.size / 1024 / 1024 < this.fileSize;
164 162 if (!isLt) {
165   - this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
  163 + this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
166 164 return false;
167 165 }
168 166 }
169   - this.loading = this.$loading({
170   - lock: true,
171   - text: "上传中",
172   - background: "rgba(0, 0, 0, 0.7)",
173   - });
  167 + this.$modal.loading("正在上传图片，请稍候...");
174 168 this.number++;
175 169 },
176 170 // 文件个数超出
177 171 handleExceed() {
178   - this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
  172 + this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
179 173 },
180 174 // 上传失败
181 175 handleUploadError() {
182   - this.$message({
183   - type: "error",
184   - message: "上传失败",
185   - });
186   - this.loading.close();
  176 + this.$modal.msgError("上传图片失败，请重试");
  177 + this.$modal.closeLoading();
187 178 },
188 179 // 预览
189 180 handlePictureCardPreview(file) {
... ...