帮一个公司做网站多少钱,山东省住房和城乡建设厅厅长,天津网站建设制作软件,网站页头图片编写一个上传文件的组件 tuku,点击图片上传后使用FileReader异步读取文件的内容#xff0c;读取完成后获得文件名和base64码#xff0c;调用后端uploadApi,传入姓名和base64文件信息#xff0c;后端存入nginx中#xff0c;用于访问 tuku.ts组件代码#xff1a; templa…编写一个上传文件的组件 tuku,点击图片上传后使用FileReader异步读取文件的内容读取完成后获得文件名和base64码调用后端uploadApi,传入姓名和base64文件信息后端存入nginx中用于访问 tuku.ts组件代码 template!-- 点击后触发方法修改父组件的值 --el-avatar :size80 srcimgmodelValue1 clickdrawer true stylecursor: pointer;img srchttps://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png //el-avatarel-drawer v-modeldrawer title图片上传 :with-headerfalseel-upload classavatar-uploader :show-file-listfalse :on-changeonChange :auto-uploadfalseel-icon classavatar-uploader-iconPlus //el-icon/el-upload/el-drawer/templatescript langts setupimport { defineModel,ref} from vue;
import { uploadApi } from /api/index.ts;const modelValue defineModel(tukuimg1)const onChange (uploadFile:any, uploadFiles: any){let name uploadFile.name//FileReader是浏览器提供的API用于异步读取文件的内容let reader new FileReader()//使用readAsDataURL方法异步读取文件内容。uploadFile.raw应该是文件对象本身reader.readAsDataURL(uploadFile.raw)//设置FileReader的onload事件处理器当读取操作完成时这个函数会被调用,注意这里的file参数实际上是event对象reader.onload (file){callUploadApi(name,file.target?.result)}}const callUploadApi (name:String,base64 :any){uploadApi.upload.call({name,base64}).then((res: any){modelValue.value resdrawer.value false})}const drawer ref(false)/scriptstyle scoped
.avatar-uploader .avatar {width: 100px;height: 100px;display: block;
}
/style
style
.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: 100px;height: 100px;text-align: center;
}
/style
使用组件 后端api uploadService代码
package com.yy.service;import cn.hutool.core.codec.Base64;
import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.IdUtil;
import cn.hutool.core.util.StrUtil;
import cn.hutool.extra.pinyin.PinyinUtil;
import com.yy.dto.UploadDto;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;Service
public class UploadService {Value(${upload.path})private String uploadPath;Value(${upload.domain})private String uploadDomain;public String uploadAll(UploadDto uploadDto) {String name uploadDto.getName();String base64 uploadDto.getBase64();String[] base64Array StrUtil.splitToArray(base64, base64,);byte[] bytes Base64.decode(base64Array[1]);//设置图片名称前使用唯一id,防止名字重复name IdUtil.fastSimpleUUID()_name;//在保存汉字时使用拼音汉字可能不兼容例如iosname PinyinUtil.getPinyin(name, );FileUtil.writeBytes(bytes,uploadPathname);return uploadDomain/images/name;}
}
效果
