当前位置：首页 > news >正文

上传图片，base64改为文件流，并转给后端

news 来源：原创 2024/9/21 1:37:03

需求：
在这里插入图片描述

html代码：

 <el-dialog v-model="dialogPicVisible" title="新增图片" width="500"><el-form :model="picForm"><el-form-item label="图片名称：" :label-width="100"><el-input v-model="picForm.picName" clearable /></el-form-item><el-form-item label="新增图片：" prop="img" :label-width="100"><el-uploadclass="avatar-uploader":show-file-list="false":http-request="uploadFn"><img v-if="picForm.file" :src="picForm.file" class="avatar" /><el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon></el-upload></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogPicVisible = false">取 消</el-button><el-button type="primary" @click="submitPicBtn"> 确 认 </el-button></div></template></el-dialog>

这是base64转文件流的代码

// base64转文件流
function base64ToFile(base64Data, filename) {// 将base64的数据部分提取出来const parts = base64Data.split(";base64,");const contentType = parts[0].split(":")[1];let strArr = contentType.split("/");console.log('strArr',strArr)const raw = window.atob(parts[1]);// 将原始数据转换为Uint8Arrayconst rawLength = raw.length;const uInt8Array = new Uint8Array(rawLength);for (let i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i);}// 使用Blob和提取出的数据内容创建一个新的Blob对象const blob = new Blob([uInt8Array], { type: contentType });// 创建一个指向Blob对象的URL，并使用这个URL创建一个File对象const blobUrl = URL.createObjectURL(blob);const newFilename = filename + '.' + strArr[1]const file = new File([blob], newFilename, { type: contentType });// 返回File对象return file;
}

这是确认提交的逻辑

function submitPicBtn() {const file = base64ToFile(picForm.file, picForm.picName);console.log('file',file)let strArr = file.type.split("/");var fileForm = new FormData();fileForm.append("classifyId", form.classifyId);fileForm.append("file", file);var newPicName = picForm.picName + "." + strArr[1];fileForm.append("picName", newPicName);axios.post("/h5htglpt/api/uploadPic", fileForm, {headers: {"Content-Type": "multipart/form-data",},}).then((res) => {console.log('res',res)if (res.data.code == "0") {ElMessage({message: "新增成功",type: "success",});dialogPicVisible.value = falsegetTreeList();}}).catch((error) => {});
}

打印上传成功后的file 注意：name需要拼接图片类型的后缀

在这里插入图片描述

这是css的代码

.demo-image .block {padding: 30px 0;text-align: center;border-right: solid 1px var(--el-border-color);display: inline-block;width: 20%;box-sizing: border-box;vertical-align: top;
}
.demo-image .block:last-child {border-right: none;
}
.demo-image .demonstration {display: block;color: var(--el-text-color-secondary);margin: 10px 0;font-weight: bold;letter-spacing: 1px;
}.avatar-uploader .avatar {width: 178px;height: 178px;display: block;
}::v-deep .avatar-uploader .el-upload {border: 1px dashed var(--el-border-color);border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;transition: var(--el-transition-duration-fast);
}.avatar-uploader .el-upload:hover {border-color: var(--el-color-primary);
}.el-icon.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;text-align: center;
}