<el-form ref="form" :model="form" label-width="80px" label-position="top" :rules="rules">
<!-- 无关代码略 -->
<el-form-item label="详情图" prop="sDetailImg" ref="sDetailImg">
<uploadImg :form-val="form" :img-type="'sDetailImg'" :img-style="detailImgStl" @clearValidate="clearValidate"></uploadImg>
</el-form-item>
<el-form-item>
<el-row style="text-align:center;">
<el-button type="primary" size="medium" @click.stop="submit('form')" v-if="!form.ID">保存</el-button>
<el-button type="primary" size="medium" @click.stop="submit('form')" v-else-if="form.ID">修改</el-button>
<el-button size="medium" @click.stop="resetForm('form')">重置</el-button>
</el-row>
</el-form-item>
</el-form>
<!-- 略 -->
</template>
<script>
import uploadImg from "../common/uploadImg"; //图片上传
export default {
name: "good", //组件名字用户缓存
data: function() {
return {
form: {
ID: NULL,
//其他字段略
sDetailImg: "" //商品详细图
},
detailImgStl: {
width: "350px",
height: "150px"
},
rules: {
sDetailImg: [{
required: true,
message: "请填写详细图信息",
trigger: "change"
}],
}
}
},
methods: {
//这里监听子组件回写的信息，用户清除上传成功之后还显示图片未上传的bug
clearValidate: function(imgName) {
//清空图片上传成功提示图片没有上传的验证字段
this.$refs[imgName].clearValidate();
},
//重置表单
resetForm: function(formName) {
this.confirm("确认重置表单", function(self) {
self.$refs[formName].resetFields();
})
}
},
}
</script>
写在最后
关于图片上传之前我也写过一个小程序版本，总体看来pc端的图片上传相对于小程序 要复杂一点，这个封装只能满足当下单图上传的需求也有他的不足之处。当然也可以扩展为多图上传，关于多图上传的网上也有很多例子。这里不再一一赘述。
