vue2文件及图片视频上传，uniapp图片上传并转成base64

方法1：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
  </div>
</template>
<script>
export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
       const formData = new FormData()
        formData.append('file', file)
      // 处理文件上传
    }
  }
}
</script>

方法2：图片回显格式为
fileList = [ { name: ‘food.jpeg’, url: 视频路径 } ]

<template>
 <el-upload
                    :disabled="items.dis"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :file-list="items.fileList"
                    list-type="picture-card"
                    :limit="1"
                    :on-change=" (val) => {uploadFile(val, items,item,index)}"
                    :on-remove="handleRemove"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
</template>
    <script>
    import axios from 'axios'
    export default {
     watch: {
    videos: {
      handler() {
        const isArray = Array.isArray(this.videos)
        if (isArray && this.videos.length > 0) {
          this.videos.map(item => {
            item.isShowPopup = false
          })
          this.videoLists = JSON.parse(JSON.stringify(this.videos))
        } else {
          this.videoLists = []
        }
      },
      deep: true,
      immediate: true
    }
  },
    methods:{
        uploadFile(file, items, item, index) {
      this.fileList.push(file)
        const formData = new FormData()
        formData.append('file', file.raw)
        if (file.status == 'success') {
          axios.post('上传接口', formData).then(response => {
            // 处理上传成功后的逻辑
       
            }
          })
      }
    }
    }
    </script>

3.视频上传

<template>
     <div class="upload-box">
            <div class="avatar-uploader-box">
              <!-- 图片预览 -->
              <div :key="index" class="video-preview" v-for="(item, index) in videoLists">
                <video v-if="item.videoLink" :src="`${videoBaseUrl}${item.videoLink}`" @mouseover.stop="item.isShowPopup = true" class="avatar">
                  您的浏览器不支持视频播放
                </video>
                <video v-else :src="item.url" @mouseover.stop="item.isShowPopup = true" class="avatar">
                  您的浏览器不支持视频播放
                </video>
                <!-- 显示查看和删除的按钮弹窗 -->
                <div
                  @mouseleave="item.isShowPopup = false"
                  class="avatar-uploader-popup"
                  v-show="(item.videoLink || item.url) && item.isShowPopup"
                >
                  <i @click="previewVideo(item)" class="el-icon-zoom-in"></i>
                  <i @click="deleteVideo(index)" class="el-icon-delete"></i>
                </div>
              </div>

              <!-- 方框样式 -->
              <el-upload
                :action="actionUrl"
                :auto-upload="false"
                :on-change="handleAvatarChange"
                :show-file-list="false"
                class="avatar-uploader"
                ref='fileInput'
                :file-list="fileList"
                v-show="uploadShow"
              >
        <span
          element-loading-background="rgba(0, 0, 0, 0.8)"
          element-loading-spinner="el-icon-loading"
          element-loading-text="上传中"
          style="display:block;"
          v-loading="loading"
        >
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </span>
              </el-upload>

              <!-- 上传提示文字样式 -->
              <div class="upload-tip">
                <slot></slot>
              </div>
            </div>

            <!-- 查看大图 -->
            <el-dialog :visible.sync="dialogVisible" append-to-body center title="视频查看" :before-close="handleClose">
              <video :src="videoSrc" ref="video" controls alt width="100%">您的浏览器不支持视频播放</video>
            </el-dialog>
          </div>
</template>
<script>
export default {
methods:{
   // 上传之前
    beforeAvatarUpload(file) {
      return new Promise((resolve, reject) => {
        if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.raw.type) == -1) {
          // eslint-disable-next-line prefer-promise-reject-errors
          return reject('请上传正确的视频格式!')
        }

        if (file.size / 1024 / 1024 > this.sizeLimit) {
          // eslint-disable-next-line prefer-promise-reject-errors
          return reject(`视频大小不能超过${this.sizeLimit}M!`)
        }

        if (this.videoLists.length === this.numLimit) {
          // eslint-disable-next-line prefer-promise-reject-errors
          return reject(`最多上传${this.numLimit}个视频`)
        }

        resolve('符合表單規則')
      })
    },
    // 上传改变
    async handleAvatarChange(file, fileList) {
      console.log('file',file)
      const formData = new FormData()
      formData.append('file', file.raw)
      axios.post('接口路径', formData).then(response => {
        console.log('chenggong',response)
        this.form.url =  response.data.fileName
      })
      try {
        await this.beforeAvatarUpload(file)
        this.uploadImgApi(file)
      } catch (e) {
        this.$message.warning(JSON.stringify(e))
      }
    },
    // 上传视频准备
    uploadImgApi(data) {
      const videoSrc = URL.createObjectURL(data.raw)
      this.videoLists.push({
        videoFile: data,
        url: videoSrc,
        isShowPopup: false
      })
      this.$emit('change', this.videoLists)
    },
    // 预览视频
    previewVideo(data) {
      if (data.videoLink) {
        this.videoSrc = `${this.videoBaseUrl}${data.videoLink}`
      } else {
        this.videoSrc = data.url
      }
      this.dialogVisible = true
    },
    // 删除视频
    deleteVideo(index) {
      this.$emit('delete', index)
    },
    handleClose() {
      const video = document.getElementsByTagName('video')[1]
      if (!video.paused) {
        video.currentTime = 0
        video.pause()
      }
      this.dialogVisible = false
    },}
}
</script>

4.uniapp文件上传 图片回显格式为

fileLists = [
             {
               url: items.url,
               extname: 'png',
               name: '1'
             }
           ]

   <uni-file-picker
                v-model="items.fileLists"
                fileMediatype="image"
                mode="grid"
                @select=" (val) => {select(val, items,item,index) }"
                @progress="progress"
                @success="success"
                @fail="fail"
                :value="items.fileLists"
                :disabled='false'
                :del-icon="false"
            />
<script>
export default{
methods:{
    select(e,items,item,index){
          let _that = this
          uni.compressImage({
            src: e.tempFilePaths[0],
            quality: 10,//图片压缩质量，0～100，默认80，仅对jpg有效
            success: res => {
              console.log('res', res)
              uni.getFileSystemManager().readFile({
                filePath: res.tempFilePath, // 要读取的文件路径
                encoding: 'base64',// 编码格式
                success: function (res) {
                  const baseurl = 'data:image/png;base64,' + res.data
                  request('', '/common/uploadFrom64', 'Post', {image: baseurl}, {},).then(res => {
                    _that.url = baseConfig.baseUrl+ res.fileName
                  })
                }
              })
            }
          })
      },
}
</script>