来了,来了,最基础的VUE文件上传删除、图片上传删除、视频上传删除的代码真的来了,
这里使用的是VUE+element组件做的,大家有需要的尽管拿走。
代码如下:
<!-- 添加产品界面 -->
<template>
<el-dialog
title="添加产品"
:visible.sync="dialogTableVisible"
width="70%"
@close="dialogClose"
:modal-append-to-body="false"
>
<el-form status-icon label-width="100px" class="el-form">
<div class="basicinformation">
<span>基础信息</span>
<el-form-item label="所属公司:" prop="companyAffiliation">
<el-select v-model="form.companyAffiliation" placeholder="请选择">
<el-option
v-for="item in companyData"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="产品线:" prop="productLine">
<el-select v-model="form.productLine" placeholder="请选择" @change="productModelListUrl">
<el-option
v-for="item in productLineData"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="产品型号:" prop="productModel" class="left:300px;">
<el-select v-model="form.productModel" placeholder="请选择">
<el-option
v-for="item in productModelData"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="产品名称:" prop="productName">
<el-input type="text" style="width:165px" v-model="form.productName"></el-input>
</el-form-item>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="产品图片:" prop="image">
<el-upload
accept="image/gif, image/jpg, image/jpeg, image/png, image/svg"
list-type="picture-card"
style="width:200px"
action
:http-request="uploadPicSubmit"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:limit="1"
@click.native="uploadClickGetIdx('')"
>
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="产品介绍:" prop="productIntroduction">
<el-input type="textarea" style="width:200px" v-model="form.productIntroduction"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div class="basicinformation" v-for="(item, index) in addPdf" :key="'info' + index">
<i class="el-icon-plus clolos" v-show="index === 0" @click="addPdfFile"></i>
<i class="el-icon-delete clolos rm-icon" v-show="index !== 0" @click="deletePdf(index)"></i>
<span>新增PDF</span>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="语言:" prop="languageId">
<el-select v-model="item.languageId" placeholder="请选择">
<el-option
v-for="i in languageData"
:key="i.id + index"
:label="i.name"
:value="i.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="产品类别:" prop="categoryId">
<el-select v-model="item.categoryId" placeholder="请选择">
<el-option
v-for="i in productCategoryData"
:key="i.id + index"
:label="i.name"
:value="i.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="22">
<el-col :span="10">
<el-form-item label="彩页名称:" prop="name">
<el-input type="text" style="width:165px" v-model="item.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="彩页图片:" prop="pdfImage">
<el-upload
accept="image/gif, image/jpg, image/jpeg, image/png, image/svg"
class="upload-demo"
action
style="width:300px"
:http-request="uploadImgSubmit"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:limit="1"
@click.native="uploadClickGetIdx(index, 'pic')"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="彩页文件:" prop="fileUrl">
<el-upload
accept=".pdf, .word, .excel, .xls, .docx, .xlsx"
class="upload-demo"
action
style="width:300px"
:http-request="uploadPdfSubmit"
:before-upload="beforePdfUpload"
:on-remove="handleRemovePdf"
:limit="1"
@click.native="uploadClickGetIdx(index, 'pdf')"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
</div>
<div class="basicinformation" v-for="(item, index) in addVideo" :key="'info1' + index">
<i class="el-icon-plus clolos" v-show="index === 0" @click="addvideoFile"></i>
<i class="el-icon-delete clolos rm-icon" v-show="index !== 0" @click="deleteVideo(index)"></i>
<span>新增视频信息</span>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="语言:" prop="languageId">
<el-select v-model="item.languageId" placeholder="请选择">
<el-option v-for="i in languageData" :key="i.id" :label="i.name" :value="i.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="产品类别:" prop="categoryId">
<el-select v-model="item.categoryId" placeholder="请选择">
<el-option
v-for="i in productCategoryData"
:key="i.id"
:label="i.name"
:value="i.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="22">
<el-col :span="10">
<el-form-item label="视频名称:" prop="name">
<el-input type="text" style="width:165px" v-model="item.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="视频链接:" prop="hyperlink">
<el-input type="text" style="width:165px" v-model="item.hyperlink"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="视频文件:" prop="videoUrl">
<el-upload
accept=".mp4"
class="avatar-uploader"
action
style="width:300px"
:http-request="uploadVideoSubmit"
:before-upload="beforeVideoUpload"
:on-remove="handleRemoveVideo"
:limit="1"
@click.native="uploadClickGetIdx(index, 'video')"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="dialogClose">返回</el-button>
</div>
</el-dialog>
</template>
<script>
import selectData from '@/mixins/selectData.js'
import HeaderNav from '@/components/headerNav'
export default {
data() {
return {
picIdx: '', // 图片上传时index
pdfIdx: '', // 文件上传时的index
videoIdx: '', // 视频上传时的index
// productId:'',//产品id
form: {
companyAffiliation: '', // 所属公司
productLine: '', // 产品线
productModel: '', // 产品型号
productName: '', // 产品名称
productIntroduction: '', // 公司介绍
image: '', // 产品图片
},
// 新增pdf数据
addPdf: [
{
languageId: '', // 语言
categoryId: '', // 产品类别
name: '', // 彩页名称
pdfImage: '', // 彩页图片
fileUrl: '', // 彩页文件
productId: '', //产品id
companyId: '', // 公司id
},
],
// 新增视频数据
addVideo: [
{
languageId: '', // 语言
categoryId: '', // 产品类别
name: '', // 视频名称
hyperlink: '', // 视频网址
videoUrl: '', // 视频文件
productId: '', // 产品id
companyId: '', // 公司id
},
],
dialogTableVisible: true,
}
},
mixins: [selectData],
components: {
HeaderNav,
},
methods: {
//提交表单
submitForm() {
let params = {
companyId: this.form.companyAffiliation, // 所属公司
createDate: '',
createPeople: '',
id: '',
image: this.form.image, // 产品图片
introduction: this.form.productIntroduction, // 公司介绍
name: this.form.productName, // 产品名称
productlineId: this.form.productModel
? this.form.productModel
: this.form.productLine, // 有产品型号不用传产品线
}
// 基础信息提交
this.$Posting(this.$api.addProductUrl, params).then((res) => {
if (res.code === 0) {
// 循环pdf数据和视频数据
this.addVideo.forEach((i, idx) => {
i.productId = res.data.id
i.companyId = this.form.companyAffiliation
})
this.addPdf.forEach((i, idx) => {
i.productId = res.data.id
i.companyId = this.form.companyAffiliation
})
// 视频信息提交
this.$Posting(this.$api.addVideoUrl, this.addVideo).then(
(res) => {
// pdf信息提交
this.$Posting(
this.$api.addPdfUrl,
this.addPdf
).then((res) => {
this.$message.success('新增成功')
this.dialogClose()
})
}
)
}
})
},
//添加PDF对象
addPdfFile() {
const objPdf = {
languageId: '', // 语言
categoryId: '', // 产品类别
name: '', // 彩页名称
pdfImage: '', // 彩页图片
fileUrl: '', // 彩页文件
productId: '', //产品id
companyId: '', // 公司id
}
this.addPdf.push(objPdf)
},
// 删除PDF对象
deletePdf(n) {
this.addPdf.splice(n, 1)
},
// 添加视频对象
addvideoFile() {
const videoPdf = {
languageId: '', // 语言
categoryId: '', // 产品类别
name: '', // 视频名称
hyperlink: '', // 视频网址
videoUrl: '', // 视频文件
productId: '', //产品id
companyId: '', // 公司id
}
this.addVideo.push(videoPdf)
},
// 删除视频对象
deleteVideo(n) {
this.addVideo.splice(n, 1)
},
// 关闭弹框
dialogClose() {
this.$emit('dialogClose')
},
// 上传时获取index
uploadClickGetIdx(idx, type) {
if (type === 'pic') {
// 图片的index
this.picIdx = idx
} else if (type === 'pdf') {
// pdf的index
this.pdfIdx = idx
} else if (type === 'video') {
// 视频的index
this.videoIdx = idx
}
},
// 视频自定义上传
uploadVideoSubmit(file) {
let uploadFile = new FormData()
uploadFile.append('file', file.file)
this.$PostingBlob(this.$api.videoUploadUrl, uploadFile).then(
(res) => {
if (res.code === 0) {
this.addVideo[this.videoIdx].videoUrl = res.data
}
}
)
},
// 选择视频的校验
beforeVideoUpload(file) {
if (file.size / 1024 / 1024 > 128) {
this.$message.warning('上传文件不超过128MB')
return false
}
var ext = file.name.substring(file.name.lastIndexOf('.') + 1)
const extension = ext === 'mp4'
if (!extension) {
this.$message.warning('上传视频格式只能为mp4')
return false
}
},
// 删除视频文件
handleRemoveVideo() {
let path = this.addVideo[this.videoIdx].videoUrl
this.$Posting(this.$api.rmFileUrl, { path }).then((res) => {
if (res.code === 0) {
this.$message.success('删除成功')
}
})
},
// PDF图片自定义上传
uploadImgSubmit(file) {
let uploadFile = new FormData()
uploadFile.append('file', file.file)
this.$PostingBlob(this.$api.picUploadUrl, uploadFile).then(
(res) => {
if (res.code === 0) {
this.addPdf[this.picIdx].pdfImage = res.data
}
}
)
},
// 文件自定义上传
uploadPdfSubmit(file) {
let uploadFile = new FormData()
uploadFile.append('file', file.file)
this.$PostingBlob(this.$api.pdfUploadUrl, uploadFile).then(
(res) => {
if (res.code === 0) {
this.addPdf[this.pdfIdx].fileUrl = res.data
}
}
)
},
// 选择文件的校验
beforePdfUpload(file) {
if (file.size / 1024 / 1024 > 10) {
this.$message.warning('上传文件不超过10MB')
return false
}
var ext = file.name.substring(file.name.lastIndexOf('.') + 1)
const extension =
ext === 'pdf' ||
ext === 'word' ||
ext === 'excel' ||
ext === 'docx' ||
ext === 'xlsx' ||
ext === 'xls'
if (!extension) {
this.$message.warning(
'上传文件格式只能为pdf、word、excel、docx、xlsx、xls'
)
return false
}
},
// 删除彩页文件
handleRemovePdf() {
let path = this.addPdf[this.pdfIdx].fileUrl
this.$Posting(this.$api.rmFileUrl, { path }).then((res) => {
if (res.code === 0) {
this.$message.success('删除成功')
}
})
},
// 产品图片自定义上传
uploadPicSubmit(file) {
let uploadFile = new FormData()
uploadFile.append('file', file.file)
this.$PostingBlob(this.$api.picUploadUrl, uploadFile).then(
(res) => {
if (res.code === 0) {
this.form.image = res.data
}
}
)
},
// 删除图片时的方法
handleRemove(file) {
let path = ''
if (this.picIdx !== '') {
path = this.addPdf[this.picIdx].image
} else {
path = this.form.image
}
this.$Posting(this.$api.rmFileUrl, { path }).then((res) => {
if (res.code === 0) {
this.$message.success('删除成功')
}
})
},
// 选择图片的校验
beforeUpload(file) {
if (file.size / 1024 / 1024 > 3) {
this.$message.warning('上传图片不超过3MB')
return false
}
var ext = file.name.substring(file.name.lastIndexOf('.') + 1)
const extension =
ext === 'gif' ||
ext === 'svg' ||
ext === 'jpg' ||
ext === 'png' ||
ext === 'jpeg'
if (!extension) {
this.$message.warning(
'上传图片格式只能为gif、svg、jpg、png/jpeg'
)
return false
}
},
},
}
</script>
<style lang='less' scoped>
/deep/.el-dialog {
margin-top: 7vh !important;
height: 85%;
overflow-y: scroll;
.basicinformation {
position: relative;
margin: 0 auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
width: 70%;
padding: 20px;
margin-bottom: 30px;
.clolos {
position: absolute;
right: -60px;
top: 50%;
transform: translateY(-50%);
width: 35px;
height: 35px;
background: #29affb;
line-height: 35px;
text-align: center;
border-radius: 50%;
color: #fff;
z-index: 1;
}
.rm-icon {
background: red;
}
}
.dialog-footer {
text-align: center;
}
}
</style>
效果如下:
其中包括对图片、文件、视频的格式、大小的检验,还有增加一行和删除一行功能,希望可以帮助更多小白们。