前言
这三个功能是所有项目基本都是常用的功能
上传图片，上传文件，上传视频功能
我最近也是又在做上传文件的功能
然后发现以前写了但是没有记录，导致又要从新弄很麻烦
所以这一次直接一次把三个常用的功能代码都开个帖子记录下来，方便以后复制
效果图
这是上传图片和上传文件的样式，上面的是图片的，下面是上传文件的
这是拿到的文件的信息，我这里上传的pdf的文件
这里是上传的图片的信息。
这里是上传图片的效果图
这里是视频上传的样式
上传图片代码
这里标签上的data是参数传给后台的，如果是get方法，就直接在action地址后面拼接参数，headers是请求头，一般传token之类的。limit是最大上传个数，不需要限制上传数量就删除
html
<el-upload
class="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-upload
class="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-upload
class="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-progress
v-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和D
Path: {
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 = false
this.videoFlag = true
this.videoUploadPercent =+ file.percentage.toFixed(0)
},
// 视频上传成功是执行
handleVideoSuccess (res, file) {
this.Plus = false
this.videoUploadPercent = 100
console.log(res)
// 如果为200代表视频保存成功
if (res.resCode === '200') {
// 接收视频传回来的名称和保存地址
// 至于怎么使用看你啦~
this.videoForm.videoId = res.newVidoeName
this.videoForm.videoUrl = res.VideoUrl
this.$message.success('视频上传成功！')
} else {
this.$message.error('视频上传失败，请重新上传！')
}
}
},
};