XCKJ
/
irc_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

反馈图片上传问题
continuous-integration/drone/push Build is running Details

uat_us
DESKTOP-6C3NK6N\WXS 2024-08-06 17:45:40 +08:00
parent 2a00dda5f4
commit 07fe167eac
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/feedBack/uploadImage.vue
View File

@ -23,7 +23,7 @@
alt="" alt=""
crossorigin="anonymous" crossorigin="anonymous"
/> />
<span class="el-upload-list__item-actions"> <span class="el-upload-list__item-actions" v-if="!isUpload">
<span <span
class="el-upload-list__item-preview" class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)" @click="handlePictureCardPreview(file)"
@ -38,6 +38,9 @@
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</span> </span>
</span> </span>
<div class="loadingBox" v-else>
<i class="el-icon-loading" style="color: #fff; margin: auto"></i>
</div>
</viewer> </viewer>
</div> </div>
</el-upload> </el-upload>
@ -63,6 +66,7 @@ export default {
return { return {
fileList: [], fileList: [],
btnDisabled: false, btnDisabled: false,
isUpload: false,
}; };
}, },
methods: { methods: {
@ -118,17 +122,19 @@ export default {
}, },
async uploadFile(param) { async uploadFile(param) {
var fileName = param.file.name; var fileName = param.file.name;
this.isUpload = true;
this.btnDisabled = true; this.btnDisabled = true;
let file = await this.fileToBlob(param.file); let file = await this.fileToBlob(param.file);
let res = await this.uploadToOSS(fileName, file); let res = await this.uploadToOSS(fileName, file);
this.btnDisabled = false; this.btnDisabled = false;
if (!res) return; if (!res) return (this.isUpload = false);
this.fileList.push({ this.fileList.push({
url: this.OSSclientConfig.basePath + res.name, url: this.OSSclientConfig.basePath + res.name,
path: res.name, path: res.name,
uid: param.file.uid, uid: param.file.uid,
}); });
this.$emit("update:path", [...this.path, res.name]); this.$emit("update:path", [...this.path, res.name]);
this.isUpload = false;
return false; return false;
}, },
beforeUpload(file, fileList) { beforeUpload(file, fileList) {
@ -136,7 +142,7 @@ export default {
if (isValidFile) { if (isValidFile) {
// this.fileList = []; // this.fileList = [];
} else { } else {
this.$alert("请上传PNG/JPG/JPEG文件"); this.$alert(this.$t("feedBack:uploadImg:format"));
return false; return false;
} }
}, },
@ -197,4 +203,17 @@ export default {
height: 100px; height: 100px;
line-height: 100px; line-height: 100px;
} }
.loadingBox {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100px;
height: 100px;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
</style> </style>