vue项目开发：图片、视频加其他内容同时提交的方式

最新推荐文章于 2024-06-20 21:42:12 发布

qq_Girl200

最新推荐文章于 2024-06-20 21:42:12 发布

阅读量291

点赞数 1

分类专栏： vue项目开发文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/qq_42103673/article/details/107611027

版权

vue项目开发专栏收录该内容

31 篇文章 1 订阅

订阅专栏

html代码如下：

        <el-form
                            :model="form"
                            status-icon
                            ref="form"
                            label-width="100px"
                            @submit.native.prevent
                            enctype="multipart/form-data"
                            name="fileinfo"
                            v-loading="loading"
                    >
                        <el-form-item label="视频名称" prop="title">
                            <el-input size="medium" v-model="form.title" placeholder="请填写名称"></el-input>
                        </el-form-item>
                        <el-form-item label="视频上传" prop="videopath">
                            <input
                                    type="file"
                                    name="videoFile"
                                    accept="video/*"
                                    @change="getvideoFile($event)"
                                    size="medium"
                                    ref="filElem"
                                    style="display: none"
                            />
                            <el-button type="primary" @click="choiceVideo" class="el-icon-plus">上传视频</el-button>
                            <div class="img-show">
                                <div class="avatar-uploader">
                                    <video :src="videoInfo.videoShow" alt="" class="avatar" v-if="videoInfo.videoShow"
                                           controls></video>
                                    <i v-else class="el-icon-video-camera avatar-uploader-icon"></i>
                                </div>
                                <div class="img-show-right" v-if="videoInfo.videoName">
                                    <div>视频名称:{{ videoInfo.videoName }}</div>
                                    <div>视频大小:{{ videoInfo.videoSize }}</div>
                                    <div>视频类型:{{ videoInfo.videoType }}</div>
                                </div>
                            </div>
                        </el-form-item>

                        <el-form-item label="视频封面" prop="image">
                            <input
                                    type="file"
                                    name="coverFile"
                                    accept="image/*"
                                    @change="getimgFile($event)"
                                    ref="filImg"
                                    id="filImg"
                                    style="display: none"
                            />
                            <el-button type="primary" @click="choiceImg" class="el-icon-plus" id="bimimg">上传封面
                            </el-button>
                            <div class="img-show">
                                <div class="avatar-uploader">
                                    <img :src="imgInfo.imgShow" alt="" class="avatar" v-if="imgInfo.imgShow"/>
                                    <i v-else class="el-icon-picture-outline avatar-uploader-icon"></i>
                                </div>
                                <div class="img-show-right" v-if="imgInfo.imgName">
                                    <div>图片名称:{{ imgInfo.imgName }}</div>
                                    <div>图片大小:{{ imgInfo.imgSize }}</div>
                                    <div>图片类型:{{ imgInfo.imgType }}</div>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="视频描述" prop="desc">
                            <el-input
                                    size="medium"
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 8 }"
                                    placeholder="请输入描述"
                                    v-model="form.desc"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item class="submit">
                            <el-button type="primary" @click="submitForm('form')">保 存</el-button>
                            <!--                            <el-button type="primary" @click="submitUpload">保 存</el-button>-->
                            <el-button @click="resetForm('form')">重 置</el-button>
                        </el-form-item>
                    </el-form>

js核心代码如下：

        methods: {
            choiceVideo() {
                this.$refs.filElem.click()
                // this.$refs.filElem.dispatchEvent(new MouseEvent('click'))
                // console.log(this.$refs.filElem.FileReader)
            },
            choiceImg() {
                // this.$refs.filImg.dispatchEvent(new MouseEvent('click'))
                this.$refs.filImg.click()
                // console.log(this.$refs.filImg.dispatchEvent(new MouseEvent('click')))
            },
            getvideoFile($event) {
                const [videoFile] = $event.target.files
                this.form.videoFile = videoFile
                const url = window.URL.createObjectURL(videoFile)
                this.videoInfo.videoShow = url
                this.videoInfo.videoName = videoFile.name
                this.videoInfo.videoSize = this.getfilesize(videoFile.size)
                this.videoInfo.videoType = videoFile.type
            },
            getimgFile($event) {
                const [coverFile] = $event.target.files
                this.form.coverFile = coverFile
                const url = window.URL.createObjectURL(coverFile)
                this.imgInfo.imgShow = url
                this.imgInfo.imgName = coverFile.name
                this.imgInfo.imgSize = this.getfilesize(coverFile.size)
                this.imgInfo.imgType = coverFile.type
                // console.log(this.form.coverFile)
                // console.log($event.target.value)
            },
            // 把字节转换成正常文件大小
            getfilesize(size) {
                if (!size) return ''
                const num = 1024.0
                if (size < num) {
                    return `${size}B`
                }
                if (size < num ** 2) {
                    return `${(size / num).toFixed(2)}KB`
                }
                if (size < num ** 3) {
                    return `${(size / (num ** 2)).toFixed(2)}MB`
                }
                if (size < num ** 4) {
                    return `${(size / (num ** 3)).toFixed(2)}G`
                }
                return `${(size / (num ** 4)).toFixed(2)}T`
            },
            async submitForm(formName) {
                this.loading = true
                const formData = new FormData()
                formData.append('title', this.form.title)
                formData.append('desc', this.form.desc)
                formData.append('files', this.form.videoFile)
                formData.append('files', this.form.coverFile)
                formData.append('_t', Date.parse(new Date()))
                // const res = await video.createVideo(this.form)
                const res = await video.createVideo(formData)
                // console.log(res)
                if (res.status === 200) {
                    this.$message.success(`${res.data}`)
                    this.resetForm(formName)
                    this.loading = false
                } else {
                    this.loading = false
                    this.$message.error('视频添加失败，请检测填写信息')
                }
            },
            // 重置表单
            resetForm(formName) {
                this.videoInfo.videoShow = ''
                this.videoInfo.videoName = ''
                this.videoInfo.videoSize = ''
                this.videoInfo.videoType = ''
                this.imgInfo.imgShow = ''
                this.imgInfo.imgName = ''
                this.imgInfo.imgSize = ''
                this.imgInfo.imgType = ''
                this.$refs[formName].resetFields()
            },
        },
    }
</script>