[JavaScript知识库]springboot+vue自定义上传图片及视频

说明：本例采用的是将图片视频全都先传到前端，再一次性提交给后端的思路，另外还做了一个上传前的预览

效果图

vue页面代码

<el-drawer
  size="40%"
  :visible.sync="collect_drawer"
  :append-to-body="true"
  :wrapperClosable="false"
>
  <template slot="title">
    <span class="drawer-title">{{ collect_drawer_title }}</span>
  </template>
  <el-form
    ref="collect_form"
    :rules="collectRules"
    :model="collect"
    label-width="138px"
    style="width: 100%; padding: 0 20px 0 0; height: 85%"
  >
    <el-form-item>
      <span slot="label"
        ><span style="color: #f56c6c; margin-right: 4px">*</span
        >产品图片/视频</span
      >
      <div style="display: flex; flex-wrap: wrap">
        <!-- 循环遍历 要不就是video 要不就是img -->
        <div
          v-for="(item, index) in pro_files"
          :key="index + 'proimg'"
          class="video_border"
        >
        <!-- 视频块 -->
          <div
            style="width: 130px; height: 130px; position: relative"
            v-if="item.type == 'video'"
          >
            <i
              class="iconfont icon-al-fill-right play-icon"
              @click="getPlayer(index + 1)"
            />
            <div class="crop">
              <video
                :ref="'video' + (index + 1)"
                class="video_li"
                style="
                  width: 130px;
                  height: 130px;
                  margin-right: 10px;
                  object-fit: cover;
                "
              ></video>
              <div class="delete-div">
                <i
                  class="el-icon-delete delete_icon"
                  @click="deleteFile(index)"
                ></i>
              </div>
            </div>
          </div>
           <!-- 图片块 -->
          <div
            style="width: 130px; height: 130px; position: relative"
            v-else-if="item.type == 'image'"
          >
            <div class="crop">
              <img
                @click="getImage(index + 1)"
                :ref="'image' + (index + 1)"
                class="rect_img"
              />
              <div class="delete-div">
                <i
                  class="el-icon-delete delete_icon"
                  @click="deleteFile(index)"
                ></i>
              </div>
            </div>
          </div>
          <!-- <el-progress
            class="video-progress"
            :percentage="item.loaded"
          ></el-progress> -->
        </div>
        <input
          type="file"
          style="position: absolute"
          accept="image/jpg,image/jpeg,image/bmp,image/png,image/gif,video/mp4,video/webm,video/ogg"
          ref="myfile"
          name="file"
          id="file"
          @change="uploadMyFile"
          hidden
        />
        <label for="file" style="id">
          <div id="file_up"><i class="el-icon-plus"></i></div>
        </label>
      </div>
    </el-form-item>

    <el-form-item label="产品报价" prop="price">
      <el-input
        v-model="collect.price"
        size="medium"
        placeholder="请输入产品报价（元）"
      ></el-input>
    </el-form-item>
    <el-form-item label="网址" prop="url">
      <el-input
        v-model="collect.url"
        size="medium"
        placeholder="请输入网址"
      ></el-input>
    </el-form-item>
    <el-form-item label="来源" prop="source">
      <el-input
        v-model="collect.source"
        size="medium"
        placeholder="请输入来源"
      ></el-input>
    </el-form-item>
    <el-form-item label="卖家" prop="seller">
      <el-input
        v-model="collect.seller"
        size="medium"
        placeholder="请输入卖家"
      ></el-input>
    </el-form-item>
    <el-form-item label="规格" prop="spec">
      <el-input
        v-model="collect.spec"
        size="medium"
        placeholder="请输入规格（cm）"
      ></el-input>
    </el-form-item>
    <el-form-item label="说明" prop="note">
      <el-input
        type="textarea"
        rows="3"
        resize="none"
        v-model="collect.note"
        size="medium"
        placeholder="请输入说明"
      ></el-input>
    </el-form-item>
  </el-form>
  <div style="text-align: center; height: 10%; padding: 10px">
    <el-button type="primary" @click="saveOrUpdate">保存</el-button>
    <el-button type="primary" @click="closeDrawer">取消</el-button>
  </div>
</el-drawer>
<!-- 视频展示框 -->
<el-dialog
	:visible.sync="videoVisible"
	width="80%"
	top="3vh"
	:before-close="resetVideo"
>
 <div style="height: 80vh; text-align: center">
   <video
     src=""
     style="width: 100%; height: 100%; object-fit: contain"
     ref="showVideo"
     controls="controls"
   ></video>
 </div>
</el-dialog>
<!-- 图片展示框 -->
<el-dialog
	 :visible.sync="dialogVisible"
	 append-to-body
	 width="80%"
	 top="3vh"
>
 <div style="height: 80vh; text-align: center">
   <img
     :src="dialogImageUrl"
     alt=""
     style="height: 100%; width: 100%; object-fit: contain"
   />
 </div>
</el-dialog>

data数据定义

data() {
//这里存放数据
 return {
  //视频展示框是否显示
  videoVisible: false,
  //图片展示框是否显示
  dialogVisible: false,
  //图片展示框对应url
  dialogImageUrl: undefined,
  //图片视频文件实际存放数组
  pro_files: [],
  //记录删除前的文件队列
  update_src: [],
  //控制抽屉
  collect_drawer: false,
  //抽屉标题
  collect_drawer_title: undefined,
  //实体类
  collect: {
    collect_id: undefined,
    note: undefined,
    price: undefined,
    url: undefined,
    source: undefined,
    seller: undefined,
    spec: undefined,
  },
  //表单校验
  collectRules: {},
},

methods方法定义

methods: {
    bindBeforeunLoad() {
      window.onbeforeunload = this.perforresult;
    },
    unBindBeforeunLoad() {
      window.onbeforeunload = null;
    },
    perforresult() {
      return "";
    },
    deleteFile(index) {
      //由于删除的时候
      this.update_src = [];
      for (var i = index + 1; i < this.pro_files.length; i++) {
        if (this.pro_files[i].type === "video") {
          this.update_src.push(this.$refs["video" + (i + 1)][0].src);
        } else {
          this.update_src.push(this.$refs["image" + (i + 1)][0].src);
        }
      }

      this.pro_files.splice(index, 1);

      this.$nextTick(() => {
        for (var j = 0; j < this.update_src.length; j++) {
          for (var i = index++; i < this.pro_files.length; i++) {
            if (this.pro_files[i].type === "video") {
              this.$refs["video" + (i + 1)][0].src = this.update_src[j];
            } else {
              this.$refs["image" + (i + 1)][0].src = this.update_src[j];
            }
            break;
          }
        }
      });
      this.$refs.myfile.value = null;
    },
    /**开启全屏loading */
    startLoading() {
      this.loading = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.8)",
      });
    },
    /**关闭loading**/
    closeLoading() {
      this.loading.close();
    },

    //用于关闭之后重置视频
    resetVideo() {
      this.$refs.showVideo.pause();
      this.videoVisible = false;
    },
    //上传视频方法
    uploadMyFile() {
      const that = this;
      //获取到 input file
      let myfile = that.$refs.myfile;
      //获取到上传的file文件
      let file = myfile.files[0];
      if (myfile.files[0]) {
        //判断如果是视频
        if (file.type.indexOf("video") != -1) {
          //先将视频文件放到视频文件总数组
          that.$set(that.pro_files, that.pro_files.length, {
            file: file,
            type: "video",
          });
          //因为我根据v-for总数组来渲染的，所以当我去设置数组，会有延迟渲染，取不到ref，用nextTick，等渲染结束再操作
          that.$nextTick(() => {
            //获取到当前上传的文件的虚拟dom，用filReader读取文件，并且把视频对应的file信息装填上去。
            let video = that.$refs["video" + that.pro_files.length][0];
            if (window.FileReader) {
              var fr = new FileReader();
              // fr.onprogress = function (e) {
              //   that.$set(
              //     that.pro_files[that.pro_files.length - 1],
              //     "loaded",
              //     (e.loaded / file.size).toFixed(2) * 100
              //   );
              // };
              fr.onloadend = function (e) {
                //上传完成之后
                video.src = e.target.result;
                video.title = myfile.files[0].name;
              };
              fr.readAsDataURL(myfile.files[0]);
            }
          });
        } else {
          //与上传视频几乎同理，不再赘述
          that.$set(that.pro_files, that.pro_files.length, {
            file: file,
            type: "image",
          });
          that.$nextTick(() => {
            let image = that.$refs["image" + that.pro_files.length][0];
            if (window.FileReader) {
              var fr = new FileReader();
              // fr.onprogress = function (e) {
              //   that.$set(
              //     that.pro_files[that.pro_files.length - 1],
              //     "loaded",
              //     (e.loaded / file.size).toFixed(2) * 100
              //   );
              // };
              fr.onloadend = function (e) {
                image.src = e.target.result;
                image.title = myfile.files[0].name;
              };
              fr.readAsDataURL(myfile.files[0]);
            }
          });
        }
      }
    },
    //预览视频
    getPlayer(index) {
      this.videoVisible = true;
      this.$nextTick(() => {
        console.log(window.height);
        let source = this.$refs["video" + index][0].src;
        this.$refs.showVideo.src = source;
        this.$refs.showVideo.play();
      });
    },
    //预览图片
    getImage(index) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        let source = this.$refs["image" + index][0].src;
        this.dialogImageUrl = source;
      });
    },
    //打开抽屉
    toAddCollect() {
      this.collect_drawer = true;
      this.collect_drawer_title = "新增款式";
    },
    //关闭抽屉
    closeDrawer() {
      this.collect_drawer = false;
    },
    /**
     * 总体上传方法，思路是使用FormData来封装
     * 文件：都在一个数组里，所以循环设置即可，用同一个名字后台好接收
     * 表单：使用new Blob将json转成二进制文件
     */
    saveOrUpdate() {
      //我这里是因为图片或视频必填
      if (this.pro_files.length == 0) {
        this.$message.error({ message: "产品图片/视频文件不能为空" });
        return;
      }

      var addData = new FormData();
      this.pro_files.forEach((file) => {
        addData.append("files", file.file);
      });

      addData.append(
        "productCollect",
        new Blob([JSON.stringify(this.collect)], { type: "application/json" })
      );
      //点上传之后打开全屏loading 不让操作
      this.startLoading();
      //防止用户关闭当前窗口，弹窗防止，如果你想改弹出来的文字说明...（oh，我也想改呢）
      this.bindBeforeunLoad();
      this.postRequest("/api/proCollect", addData, {
        "Content-Type": "multipart/form-data",
      }).then((res) => {
        if (res.success) {
          this.$message.success({ message: res.message });
          this.collect_drawer = false;
        }
        this.closeLoading();
        this.unBindBeforeunLoad();
      });
    },
}

css样式

<style scoped>
	::v-deep .el-upload-list--picture-card .el-upload-list__item {
	  width: 100px;
	  height: 100px;
	}
	::v-deep .el-upload--picture-card {
	  width: 100px;
	  height: 100px;
	  line-height: 110px;
	}
	#file_up {
	  background-color: #fbfdff;
	  border: 1px dashed #c0ccda;
	  text-align: center;
	  border-radius: 6px;
	  box-sizing: border-box;
	  width: 130px;
	  height: 130px;
	  line-height: 130px;
	  cursor: pointer;
	  vertical-align: top;
	  display: inline-block;
	}
	#file_up:hover,
	#file_up:focus {
	  border-color: #409eff;
	  color: #409eff;
	}
	#file_up i {
	  font-size: 28px;
	  color: #8c939d;
	}
	.play-icon {
	  background: grey;
	  font-size: 20px;
	  cursor: pointer;
	  z-index: 100;
	  border-radius: 50%;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  margin-left: -16px;
	  margin-top: -16px;
	  color: #fff;
	  border: 6px solid grey;
	}
	
	.play-icon:hover {
	  opacity: 0.8;
	}
	.video_border {
	  margin-right: 10px;
	  margin-bottom: 10px;
	}
	
	.delete_icon {
	  color: #fff;
	  line-height: inherit;
	  font-size: 17px;
	  cursor: pointer;
	}
	.delete_icon:hover {
	  color: #f56c6c;
	  line-height: inherit;
	  font-size: 17px;
	  cursor: pointer;
	}
	.delete-div {
	  height: 0px;
	  position: absolute;
	  width: 100%;
	  background: #000;
	  opacity: 0.7;
	  bottom: 0;
	  text-align: center;
	  transition: height 0.2s ease 0s;
	}
	.crop:hover .delete-div {
	  height: 30%;
	}
	.rect_img {
	  position: absolute;
	  clip: rect(0px 130px 130px 0px);
	  width: 130px;
	  height: 130px;
	  margin-right: 10px;
	  cursor: pointer;
	  object-fit: cover;
	}
</style>

后台接口

    @PostMapping
    @ApiOperation("新增款式收集")
    public Result addCollect(
    	@RequestPart(value = "productCollect") ProductCollect productCollect,
    	@RequestPart(value = "files", required = true) MultipartFile[] files) 
    {
        return cProductCollectService.addCollectFlow(productCollect,files);
    }

记录学习日常，欢迎交流 ~

补充说明

其实我还做了一个进度条，就是你看到注释掉的那些，进度通过 fileReader 类的 onProgress 可以获取到，但效果并不是很理想（而且怪难看的
这个例子里我没有做任何的文件处理（压缩、分片），可以自行完善
顺便一提，如果有很大的文件，这样上传要卡挺久的，所以我要改成一个个往后端传了，告辞