1. 添加商品(完成图片上传)
- 使用upload组件完成图片上传
- 在element.js中引入upload组件,并注册
- 因为upload组件进行图片上传的时候并不是使用axios发送请求
- 所以,我们需要手动为上传图片的请求添加token,即为upload组件添加headers属性
<el-tab-pane label="商品图片" name="3">
<!-- 商品图片上传
action:指定图片上传api接口
:on-preview : 当点击图片时会触发该事件进行预览操作,处理图片预览
:on-remove : 当用户点击图片右上角的X号时触发执行
:on-success:当用户点击上传图片并成功上传时触发
list-type :设置预览图片的方式
:headers :设置上传图片的请求头 -->
<el-upload :action="uploadURL" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" list-type="picture" :headers="headerObj">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-tab-pane>
<!-- 预览图片对话框 -->
<el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
<img :src="previewPath" class="previewImg" />
</el-dialog>
data(){
return {
......
addForm: {
goods_name: '',
goods_price: 0,
goods_weight: 0,
goods_number: 0,
goods_cat: [],
pics: []
},
uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',
headerObj: {
Authorization: window.sessionStorage.getItem('token') },
previewPath: '',
previewVisible:false
}
},
methods:{
.......
handlePreview(file) {
this.previewPath = file.response.data.url
this.previewVisible = true
},
handleRemove(file) {
const filePath = file.response.data.tmp_path
const index = this.addForm.pics.findIndex(item => item.pic === filePath)
this.addForm.pics.splice(index, 1)
},
handleSuccess(response) {
this.addForm.pics.push({
pic: response.data.tmp_path })
}
}
2.1富文本插件
- 想要使用富文本插件vue-quill-editor,就必须先从依赖安装该插件
引入并注册vue-quill-editor,打开main.js,编写如下代码
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
......
Vue.component('tree-table', TreeTable)
Vue.use(VueQuillEditor)
- 使用富文本插件vue-quill-editor
<!-- 富文本编辑器组件 -->
<el-tab-pane label="商品内容" name="4">
<!-- 富文本编辑器组件 -->
<quill-editor v-model="addForm.goods_introduce"></quill-editor>
<!-- 添加商品按钮 -->
<el-button type="primary" class="btnAdd">添加商品</el-button>
</el-tab-pane>
addForm: {
goods_name: '',
goods_price: 0,
goods_weight: 0,
goods_number: 0,
goods_cat: [],
pics: [],
goods_introduce:''
}
.ql-editor{
min-height: 300px;
}
.btnAdd{
margin-top:15px;
}
2.2 添加商品 (深拷贝,lodash插件)
- 完成添加商品的操作
在添加商品之前,为了避免goods_cat数组转换字符串之后导致级联选择器报错
- 我们需要打开vue控制条,点击依赖,安装lodash,把addForm进行深拷贝
<script>
import _ from 'lodash'
<!-- 添加商品按钮 -->
<el-button type="primary" class="btnAdd" @click="add">添加商品</el-button>
add(){
this.$refs.addFormRef.validate(async valid=>{
if(!valid) return this.$message.error("请填写必要的表单项!")
const form = _.cloneDeep(this.addForm)
form.goods_cat = form.goods_cat.join(",")
this.manyTableData.forEach(item=>{
form.attrs.push({
attr_id:item.attr_id, attr_value:item.attr_vals.join(" ") })
})
this.onlyTableData.forEach(item=>{
form.attrs.push({
attr_id:item.attr_id, attr_value:item.attr_vals })
})
const {
data:res} = await this.$http.post('goods',form)
if(res.meta.status !== 201){
return this.$message.error('添加商品失败')
}
this.$message.success('添加商品成功')
this.$router.push('/goods')
})
}
</script>
2.3 添加商品所有的
<template>
<div>
<!-- 面包屑导航 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>添加商品</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片区域 -->
<el-card>
<!-