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

前言

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

效果图

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

这是拿到的文件的信息，我这里上传的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>
1
2
3
4
5
6
7
8
9
10
11
12
13

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);
    },
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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

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>
1
2
3
4
5
6
7
8
9
10

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);
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

帖子传送门：点击这里
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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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('视频上传失败，请重新上传！')
      }
    }
    
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58