VUE文件上傳刪除、圖片上傳刪除、視頻上傳刪除

來了，來了，最基礎的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>

效果如下：

 

 其中包括對圖片、文件、視頻的格式、大小的檢驗，還有增加一行和刪除一行功能，希望可以幫助更多小白們。