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

集团企业网站建设方案策划书seo怎么快速提高排名

news 2025/7/5 5:43:22

集团企业网站建设方案策划书,seo怎么快速提高排名,大学一学一做视频网站,供应链管理培训课程业务上有需求是前端上传 jpg/png/gif 格式, 并且尺寸为 150px * 150px,300px*300px,428*428px 的图片同时在上传的同时需要携带用户的个人信息以及其他额外信息因此在 element-upload 基础之上实现这个需求需要在上传前检查图片的大小，格式以及尺寸如何上传也成…

业务上有需求是前端上传 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-load="beforeLargeUpload" :dialog-pic-visible="dialogPicVisible" :picture-large-dim="ruleForm.pictureLarge" :upload-data="uploadLargeData" @changePicUrl="changePicUrl" /><uploadPic form-label="上传小图片" :before-load="beforeSmallUpload" :dialog-pic-visible="dialogPicVisible" :picture-large-dim="ruleForm.pictureSmall" :upload-data="uploadLargeData" @changePicUrl="changePicUrlSmall" /><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/jpeg'const 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})})},}
</script>

1-1-2 子组件 uploadPic

<template><div><el-form-item :label="formLabel"><div style="display:flex; justify-content:space-between;"><el-input v-model="pictureLargeDim" placeholder="请点击上传按钮" :disabled="true" /><el-button type="primary" @click="dialogPicVisible = true">上传</el-button></div><el-dialog :title="formLabel" :visible.sync="dialogPicVisible"><el-uploadclass="upload-demo":limit="1"accept="image/jpeg,image/gif,image/png"dragaction="/config/upload":data="uploadData":before-upload="beforeLoad":on-success="handleAvatarSuccess":on-exceed="handleExceed"><i class="el-icon-upload" /><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过2MB</div></el-upload></el-dialog></el-form-item></div>
</template><script>
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>