【上传图片，文件，视频功能合集】vue-elementul简单实现上传文件，上传图片，上传视频功能【详细注释，简单易用】

前言

这三个功能是所有项目基本都是常用的功能
上传图片，上传文件，上传视频功能
我最近也是又在做上传文件的功能
然后发现以前写了但是没有记录，导致又要从新弄很麻烦
所以这一次直接一次把三个常用的功能代码都开个帖子记录下来，方便以后复制

效果图

这是上传图片和上传文件的样式，上面的是图片的，下面是上传文件的

这是拿到的文件的信息，我这里上传的pdf的文件

这里是上传的图片的信息。

这里是上传图片的效果图

这里是视频上传的样式

上传图片代码

这里标签上的data是参数传给后台的，如果是get方法，就直接在action地址后面拼接参数，headers是请求头，一般传token之类的。limit是最大上传个数，不需要限制上传数量就删除
html

        <el-uploadclass="avatar-uploader"action="http://xx.xxxxx.cn/gzh/uploadFile":data="{ image_class_id: '2', file_type: '1' }"name="img":headers="{ token: 'db0044f0d0bbdce0a8e7dc4ca661bdbaa3e0e7ae' }"ref="upload2":file-list="ruleForm.imgList2":on-success="uploadSuccess2":on-remove="uploadRmove2"list-type="picture-card":limit="1"></el-upload>

js

methods:{// 上传图片成功回调uploadSuccess2(response, file, fileList) {let that = this;if (response.code == "201") {that.$nextTick(() => {let mainImg = that.$refs.upload2;if (mainImg) {// 去重mainImg.uploadFiles.forEach((element, index) => {if (file.uid == element.uid) {mainImg.uploadFiles.splice(index, 1);}});}});that.$alert(response.message);return;}that.$message({message: "上传成功",type: "success",});//上传成功、图片信息保存that.mapListed2.push(response);console.log('图片信息',that.mapListed2);},// 删除图片uploadRmove2(file, fileList) {this.ruleForm.imgList2 = [];this.mapListed2.splice(0, 1);},}

上传文件代码（标签的属性参照上面图片的解释，通用）

html

        <el-uploadclass="upload-demo"action="https://xxxx.xxxx.xxxx.xxx":on-success="uploadSuccess3":on-remove="uploadRmove3"multiple:file-list="ruleForm.imgList3"><el-button size="small" type="primary">点击上传</el-button></el-upload>

js

methods:{// 上传文件uploadSuccess3(response, file, fileList) {console.log('response',response);console.log('file',file);let that = this;console.log("fileList(上传文件列表)", fileList);that.mapListed3 = [];//存文件地址that.$message({message: "上传成功",type: "success",});fileList.forEach((element) => {console.log("element", element);// element.response.fj是文件的地址，拼接上后台的地址保存到mapListed3变量内that.mapListed3.push("http://file.jskwsx.com:223" + element.response.fj);console.log('后台地址',that.mapListed3);});},//删除文件uploadRmove3(file, fileList) {console.log("file", file);console.log("fileList", fileList);},
}

上传视频代码（这个功能我有专门写一个前后端视频上传播放的帖子）

帖子传送门：点击这里
html

        <el-tab-pane label="业务视频" name="second"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="上传视频"><el-uploadclass="avatar-uploader el-upload--text":drag="Plus"action="http://localhost:8001/api/uploadVideo3"multiple:show-file-list="false":data="{ SavePath: this.Path.url }":on-success="handleVideoSuccess":before-upload="beforeUploadVideo":on-progress="uploadVideoProcess"><i v-if="Plus" class="el-icon-upload"></i><div v-if="Plus" class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><el-progressv-if="videoFlag == true"type="circle":percentage="videoUploadPercent"style="margin-top: 30px"></el-progress><div class="el-upload__tip" slot="tip">只能上传mp4/flv/avi文件，且不超过300M</div></el-upload></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button></el-form-item></el-form></el-tab-pane>

js

 data() {return {//视频部分videoForm: {videoId: '',videoUrl: ''},videoFlag: false,Plus: true,//上传视频时带的参数，这个地址就是后端保存磁盘的地址。可以更改。不建议放F盘，有的电脑可能没有F盘，只有C和DPath: {url: 'D:/video/videoUpload'},videoUploadPercent: 0};},methods:{//视频部分// 视频上传前执行beforeUploadVideo (file) {//文件大小const isLt300M = file.size / 1024 / 1024 < 300//视频后缀检查if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) === -1) {this.$message.error('请上传正确的视频格式')return false}if (!isLt300M) {this.$message.error('上传视频大小不能超过300MB哦!')return false}},// 视频上传过程中执行uploadVideoProcess (event, file, fileList) {this.Plus = falsethis.videoFlag = truethis.videoUploadPercent =+ file.percentage.toFixed(0)},// 视频上传成功是执行handleVideoSuccess (res, file) {this.Plus = falsethis.videoUploadPercent = 100console.log(res)// 如果为200代表视频保存成功if (res.resCode === '200') {// 接收视频传回来的名称和保存地址// 至于怎么使用看你啦~this.videoForm.videoId = res.newVidoeNamethis.videoForm.videoUrl = res.VideoUrlthis.$message.success('视频上传成功！')} else {this.$message.error('视频上传失败，请重新上传！')}}},
};

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！