<!--货品图片上传-->
<el-upload
ref="uploadImg"
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:before-upload="fileBeforeSuccess"
:file-list="fileList"
list-type="picture">
<el-button size="small" type="primary">点击上传图片</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
<!--货品图片上传-->
methods里面:上传的方法:
fileBeforeSuccess(file) {//上传文件成功之前
this.fileUp = file //保存下来的
/* console.log("保存下来的11", this.fileUp)*/
},
组件会自动保存刚刚上传的文件下来,
我们只需要把这个file取出来,赋值给我们自己定义的变量fileUp。
(在data里先定义好:fileUp=‘’)
此处做的是包含上传图片的货品新增功能,故新增方法为:
sureNewGoodsBtn() {//确认新增
/* this.$refs.uploadImg.submit()*/
let fileSure = this.fileUp
/* console.log("fileSure", fileSure)*/
/*获取大类编号*/
const big = this.queryBigType
let bigg = big.split('-')
const classCode = bigg[0]
/*获取大类编号*/
/*获取小类编号*/
const small = this.querySmallType
let smallll = small.split('-')
const sectionCode = smallll[0]
/*获取小类编号*/
let formdata = new FormData();
formdata.append('photo', fileSure)
formdata.append('meetingCode', this.meetingCodeList)
formdata.append('groupCode', this.groupCodeList)
formdata.append('series', this.newseries)
formdata.append('batch', this.newbatch)
formdata.append('classCode', classCode)
formdata.append('sectionCode', sectionCode)
formdata.append('goodsCode', this.newgoodsCode)
formdata.append('sortCode', this.sortCode)
if ( fileSure =='' || this.newseries=='' || this.newbatch=='' || classCode=='' || sectionCode=='' || this.newgoodsCode=='' || this.sortCode==''){
this.$message({
type: 'warning',
message: '不能有值为空!'
});
}else {
addGoods(formdata).then(res => {
if (res.data.head.success) {
this.$message({
type: 'success',
message: '上传成功!'
});
this.searchGoods()
} else {
this.$message({
type: 'warning',
message: res.data.head.message
});
}
}).catch(() => {
this.$message({
type: 'info',
message: '上传失败'
});
})
this.dialogSetupVisible = false
this.searchGoods()
}
},
将所有要上传的信息包裹进一个formdata里面。
ps:formdata的接口协议写法如下:
/*新增商品*/
export const addGoods = formdata =>{
return request({
method: 'POST',
headers:{
'Content-Type':'multipart/form-data;charse=UTF-8'
},
url:'/revicewServices/staff/addGoods',
data:formdata
})
}