hbyt/evo-Financial-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

图片上传功能

Browse Source
This commit is contained in:
tzy 2025-06-17 09:50:00 +08:00
parent fb57bfb49c
commit 1098acf567
1 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/views/restaurant/images/index.vue
View File

@ -86,10 +86,13 @@
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
:file-list="fileList"
:data="form"
:limit="1"
list-type="picture"
accept=".jpg,.jpeg,.png"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
@ -145,7 +148,7 @@ export default {
// 上传参数
upload: {
// 上传地址
url: process.env.VUE_APP_BASE_API + "/restaurant/images/upload",
url: process.env.VUE_APP_BASE_API + "/restaurant/images/uploadDispatchings",
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() }
},
@ -218,27 +221,34 @@ export default {
},
/** 文件上传成功处理 */
handleSuccess(response, file, fileList) {
console.log('上传响应:', response);
console.log('上传文件:', file);
console.log('文件列表:', fileList);
if (response.code === 200) {
this.form.imageUrl = response.data;
this.form.imageUrl = response.data || response.url;
this.$modal.msgSuccess("上传成功");
this.getList();
this.open = false;
this.fileList = fileList;
} else {
this.$modal.msgError(response.msg || "上传失败");
// 从文件列表中移除失败的文件
this.fileList = fileList.filter(item => item.uid !== file.uid);
}
},
/** 文件上传前的处理 */
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 3;
if (!isJPG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!');
return false;
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
this.$message.error('上传图片大小不能超过 3MB!');
return false;
}
return isJPG && isLt2M;
return true;
},
/** 文件列表移除时的钩子 */
handleRemove(file, fileList) {
@ -256,23 +266,29 @@ export default {
this.$modal.msgError("请先上传图片");
return;
}
if (this.form.id) {
// 更新操作
uploadDispatchingFile(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
// 使用正确的API接口
uploadDispatchingFile(this.form).then(response => {
if (response.code === 200) {
this.$modal.msgSuccess(this.form.id ? "修改成功" : "新增成功");
this.open = false;
this.getList();
});
} else {
// 新增操作
uploadDispatchingFile(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
} else {
this.$modal.msgError(response.msg || "操作失败");
}
}).catch(error => {
console.error('提交失败:', error);
this.$modal.msgError("操作失败，请重试");
});
}
});
},
/** 文件上传错误处理 */
handleError(error, file) {
console.error('上传错误:', error);
this.$modal.msgError("上传失败，请重试");
// 从文件列表中移除失败的文件
this.fileList = this.fileList.filter(item => item.uid !== file.uid);
}
}
};