没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
3页
上传组件封装需求分析 在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息。加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片上传逻辑。 upload.vue解析 upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,因为input样式不太符合需求所以只是将起设置为不可见,不能将其设置为display:none。否则将将无法触发input的change事件 upload.vue代码如下: <templat
资源推荐
资源详情
资源评论
vue+elementUi图片上传组件使用详解图片上传组件使用详解
上传组件封装需求分析上传组件封装需求分析
在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息。加上后
台要求要传递小于2M的图片,因此封装了一个upload.vue组件组件作为上传页面的子组件,它用于管理图片上传逻辑。
upload.vue解析
upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,
因为input样式不太符合需求所以只是将起设置为不可见,不能将其设置为display:none。否则将将无法触发input的change事
件
upload.vue代码如下:
<template>
<div>
<div class="upload-box" :style="imgStyle">
<!-- 用户改变图片按钮的点击 触发上传图片事件 -->
<input type="file" :ref="imgType$1" @change="upload(formVal$1,imgType$1)" class="upload-input" />
<!-- img 的 src 用于渲染一个 图片路径 传入图片路径 渲染出图片 -->
<img :src="formVal$1[imgType$1]?formVal$1[imgType$1]:'static/img/upload.jpg'" />
</div>
</div>
</template>
<script>
/*
该组件因为要上传多个属性的图片 主图(mainImg) 详细图(detailImg) 规格图 (plusImg)
该组件基于压缩插件lrz,所以下方打入该组件
npm install lrz --save 即可
*/
import lrz from 'lrz';
export default {
name: 'uploadImg', //组件名字
props: {
formVal: {
type: Object, //props接受对象类型数据(表单对象也可以是纯对象类型)
required: true,
default: {}
},
imgType: { //表单对象中的图片属性 example:mainImg
type: String,
required: true,
default: ''
},
imgStyle: {
type: Object, // 用于显示的图片的样式
required: true //必须传递
}
},
created: function() {
//生命周期函数
},
data: function() {
/*
因为该组件需要改变父组件传递过来的值,
所以将起拷贝一份
*/
let formVal$1 = this.formVal;
let imgType$1 = this.imgType;
return {
formVal$1,
imgType$1,
uploadUrl: url,//你的服务器url地址
};
},
methods: {
upload: function(formVal, imgType) {
var self = this;
//图片上传加载我们在这里加入提示,下方需要主动关闭,防止页面卡死
var loadingInstance = this.$loading({
text: '上传中'
});
var that = this.$refs[imgType].files[0]; //文件压缩file
//图片上传路径
var testUrl = this.uploadUrl; //图片上传路径
try {
资源评论
weixin_38713717
- 粉丝: 6
- 资源: 932
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功