vue2+vu3项目经验小结）

vue视频上传进度条

// 上传视频
    ImportExcel(file) {
   
      this.videoName = file.target.files[0].name
      this.file = file.target.files ? file.target.files[0] : []
      var config = {
   
        onUploadProgress: (progressEvent) => {
   
          this.upload = true
          var complete =
              ((progressEvent.loaded / progressEvent.total) * 100) | 0
          this.progress = complete
        }
      }
      const formData = new FormData()
      formData.append('video', this.file)

      const fetchUrl = `http://39.96.75.98:8088/college/uploadVideo`
      // const fetchUrl = `http://139.215.226.58:8084/college/uploadVideo`
      this.fileUpload.post(fetchUrl, formData, config).then(res => {
   
        if (res.code === 200) {
   
          this.fileInfo = res.data
          console.log(this.fileInfo)
        }
      })
    }

vue传参汉字刷新乱码

//要跳页面
this.$router.push({
   
path:"/index",
query:{
   
	msg:encodeURI("我是消息")
	}
})

//跳转到页面
<script>
export default {
   
  data(){
   
    return{
   
      msg:""
    }
  },
methods:{
   
	url(){
   
		// 上一个页面需要使用query传参,并且encodeURL下
		this.msg=decodeURI(this.$route.query.msg); // mag是上一个query传递的参数key
	}
},
	created(){
   
		this.url();
	}
}
</script>

blob导出数据

https://blog.youkuaiyun.com/weixin_45628827/article/details/123092111
图片导出

for (const item of this.chooseImgHouseTypeIds) {
   
          console.log(item)
          const promise = _this
            .getImgArrayBuffer(`${
     item.imageUrl}?t=${
     new Date().getTime()}`)
            .then((data) => {
   
            // 下载文件, 并存成ArrayBuffer对象(blob)
              zip.file(`img/${
     data.size}.jpeg`, data, {
   
                binary: true
              }) // 逐个添加文件
              cache[`img/${
     data.size}.jpeg`] = data
            })
          promises.push(promise)
        }

图片预览+上一张下一张
使用element ui中的el-image-viewer
引入组件：import ElImageViewer from ‘element-ui/packages/image/src/image-viewer’
使用组件：components: { ElImageViewer },

<div class="photo-cont">
            <div
              class="photo-incont"
              v-for="(item, index) in houseTypeimgList"
              :key="`item5_${index}`"
              @mouseenter="mouseClick(index,'','houseType')"
              @mouseleave="mouseClick(index,'leave','houseType')"
            >
              <el-image
                class="img-css"
                :src="item.imageUrl"
                :preview-src-list="srcList"
                
              ></el-image>
              <div v-if="houseTypeShow&&houseTypeActive===index" class="look-img">
                <div @click="houseTypereview(item.imageUrl,index,'houseType')">预  览</div>
              </div>
            </div>
            <el-image-viewer v-show="houseTypeLookImg" :on-close="closeViewImage" :url-list="previewList" />
            // 点击户型图预览
    houseTypereview(imageUrl, index, type) {
   
      console.log('我要预览')
      this.houseTypeLookImg