网站建设的毕业设计,使用别人网站代码做自己的网站,企业管理软件a6怎么新建账套,网站建设策划有哪些业务上有需求是前端上传 jpg/png/gif 格式, 并且 尺寸为 150px * 150px,300px*300px,428*428px 的图片 同时在上传的同时需要携带用户的个人信息以及其他额外信息 因此在 element-upload 基础之上 实现这个需求需要在上传前检查图片的大小#xff0c;格式以及尺寸如何上传也成… 业务上有需求是前端上传 jpg/png/gif 格式, 并且 尺寸为 150px * 150px,300px*300px,428*428px 的图片 同时在上传的同时需要携带用户的个人信息以及其他额外信息 因此在 element-upload 基础之上 实现这个需求需要在上传前检查图片的大小格式以及尺寸如何上传也成为一个问题 使用组件的 action 上传方式 body属性传递参数 限制格式加了一句accept“image/jpg,image/jpeg,image/png” 1-1 展示封装的组件
1-1-1 父组件 uploadPic form-label上传大图片 :before-loadbeforeLargeUpload :dialog-pic-visibledialogPicVisible :picture-large-dimruleForm.pictureLarge :upload-datauploadLargeData changePicUrlchangePicUrl /uploadPic form-label上传小图片 :before-loadbeforeSmallUpload :dialog-pic-visibledialogPicVisible :picture-large-dimruleForm.pictureSmall :upload-datauploadLargeData changePicUrlchangePicUrlSmall /script
data(){return{dialogPicVisible: false,}
},
methods: {// 上传图片接收参数// 大图片changePicUrl(resUrl) {this.ruleForm.pictureLarge resUrl},// 中间图片changePicUrlMedium(resUrl) {this.ruleForm.pictureMedium resUrl},// 小图片changePicUrlSmall(resUrl) {this.ruleForm.pictureSmall resUrl},// 上传大图片beforeLargeUpload(file) {// const isJPG file.type image/jpegconst isLt2M file.size / 1024 / 1024 2let is80x56 trueconst reader new FileReader()reader.readAsDataURL(file)reader.onload (theFile) {const image new Image()image.src theFile.target.resultimage.onload () {const { width, height } imageif ((width ! 482) || (height ! 482)) {this.$message.error(图片尺寸${width}*${height},请上传482*482 px 的图片)is80x56 falsereturn}}}if (!isLt2M) {this.$message.error(上传头像图片大小不能超过 2MB!)}return new Promise((resolve, reject) {(isLt2M is80x56).catch(err {return err})})},// 上传中图片// 上传小图片beforeMediumUpload(file) {const isLt2M file.size / 1024 / 1024 2let is300 trueconst reader new FileReader()reader.readAsDataURL(file)reader.onload (theFile) {const image new Image()image.src theFile.target.resultimage.onload () {const { width, height } imageif (width ! 150 height ! 150) {this.$message.error(图片尺寸${width}*${height},请上传 300*300 px 以下的图片)is300 false}}}if (!isLt2M) {this.$message.error(上传头像图片大小不能超过 2MB!)}return new Promise((resolve, reject) {(isLt2M is300).catch(err {return err})})},}
/script1-1-2 子组件 uploadPic
templatedivel-form-item :labelformLabeldiv styledisplay:flex; justify-content:space-between;el-input v-modelpictureLargeDim placeholder请点击上传按钮 :disabledtrue /el-button typeprimary clickdialogPicVisible true上传/el-button/divel-dialog :titleformLabel :visible.syncdialogPicVisibleel-uploadclassupload-demo:limit1acceptimage/jpeg,image/gif,image/pngdragaction/config/upload:datauploadData:before-uploadbeforeLoad:on-successhandleAvatarSuccess:on-exceedhandleExceedi classel-icon-upload /div classel-upload__text将文件拖到此处或em点击上传/em/divdiv slottip classel-upload__tip只能上传jpg/png/gif文件且不超过2MB/div/el-upload/el-dialog/el-form-item/div
/templatescript
export default {props: {pictureLargeDim: {type: String,required: true},uploadData: {type: Object,required: true},formLabel: {type: String,required: true},// 判断是大小中图片上传beforeLoad: {type: Function,required: true}},data() {return {dialogPicVisible: false}},methods: {handleAvatarSuccess(res) {// this.ruleForm.pictureLarge res.urlthis.$emit(changePicUrl, res.url)this.dialogPicVisible falsethis.$message.success(上传成功)},handleExceed() {this.$message.warning(仅上传一张图片删除之前的图片再进行之后的操作)}}
}
/script
1-2 参考文章https://blog.csdn.net/qq_41800366/article/details/113309320 https://blog.csdn.net/qq_58340302/article/details/125939912
