网站推广公司排名,网站建设+设计那种连接线厂家,wordpress python api,菜鸟移动端网站开发文章目录 使用场景页面效果前端代码 使用场景
vue2 element 表单提交图片 1.点击【上传图片】按钮择本地图片#xff08;只能选择一张图片#xff09;后。 2.点击图片#xff0c;支持放大查看。 3.点击【保存】按钮#xff0c;提交表单。
页面效果 前端代码… 文章目录 使用场景页面效果前端代码 使用场景
vue2 element 表单提交图片 1.点击【上传图片】按钮择本地图片只能选择一张图片后。 2.点击图片支持放大查看。 3.点击【保存】按钮提交表单。
页面效果 前端代码
HTML
div styledisplay: flex;align-items: center;el-upload :acceptpic_accept action :on-changeuploadChange :show-file-listfalseel-button sizesmall typeprimary上传图片/el-button/el-uploaddiv classup_sy_logo_div stylemargin-left: 15px;!--支持点击查看大图--el-image v-ifruleForm.hrefn stylewidth:100px; :srcruleForm.hrefn :preview-src-listruleForm.hrefn ? [ruleForm.hrefn] : []/el-image/div
/divVue data
pic_accept: .jpg,.png,.jpeg,.bmp,
pic_maxsize: 5,//单位MB
ruleForm: {hrefn:
},
file: [],//暂存文件
submitLoading: false,//防止重复提交Vue methods
uploadChange(file) {if (file.status ! success) return;if (!this.checkFile(file)) return;this.ruleForm.hrefn URL.createObjectURL(file.raw);// 复刻文件信息this.file file.raw;
},
checkFile(file) {// 判断图片类型if (this.pic_type) {let picTypeArr this.pic_type.split(,);let isImage false;picTypeArr.forEach(item {if (file.raw.type image/ item) {isImage true;}});if (!isImage) {message.error(上传图片只能是 this.pic_type 格式!);return false;}}// 判断图片大小if (this.pic_maxsize 0) {let isLtNumM file.size / 1024 / 1024 this.pic_maxsize;if (!isLtNumM) {message.error(上传图片大小不能超过 this.pic_maxsize MB!);return false;}}return true;
},
submitForm(formName) {let _this this;let params JSON.parse(JSON.stringify(this.ruleForm));let formData new FormData();Object.keys(params).forEach((key) {if (Array.isArray(params[key])) {params[key].forEach((v) {formData.append(key [], v);});} else {formData.append(key, params[key]);}});if (this.file.length ! 0) {formData.append(file, this.file);}_this.submitLoading true;//httpPost 是自定义的函数httpPost(你的服务器接口URL, formData).then(function (response) {let res response.data;if (res.error 0) {message.success(res.msg);_this.clearForm();} else {message.error(res.msg);}//_this.$emit(child-event-list);}).catch(function (error) {console.log(error);}).finally(function () {_this.submitLoading false;});
}服务端 PHP接受参数
$_POST;
$_FILES[file];
