vue2文件及图片视频上传，uniapp图片上传并转成base64_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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

方法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>
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

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>
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

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

fileLists = [
             {
               url: items.url,
               extname: 'png',
               name: '1'
             }
           ]
1
2
3
4
5
6
7

   <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>

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