文件上传

1、html部分

          <label class="btn" for="uploadsvideo" style="margin-left: 15px;">视频上传</label>
          <span style="display: inline-block;margin-top: 20px;color: red">*上传本地视频至素材库</span>
          <input type="file" id="uploadsvideo" name="file" multiple="multiplt"
                   style="position:absolute; clip:rect(0 0 0 0);"
                   accept="audio/3gpp, video/3gpp,audio/mp4, video/mp4,video/mpeg" @change="uploadVideo($event, 1)">

2、js部分

           async upload (data) {
                let res = await api.material.uploadFile(data)
                if (res.data.return_code === 'SUCCESS') {
                    this.$Message.success('上传成功')
                } else {
                    this.$Message.error('上传失败')
                }
            },
            // base64转blob
           dataURLtoBlob (dataurl) {
                let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length,
                    u8arr = new Uint8Array(n)
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n)
                }
                return new Blob([u8arr], {type: mime})
            },
            // 多文件上传
           uploadVideo (e, num) {
                // this.option.img
                if (!/\.(rm|rmvb|wmv|avi|mp4|3gp|mkv)$/.test(e.target.value)) {
                    alert('请上传视频格式文件')
                    return false
                } else {
                    let _this = this
                    let fileList = e.target.files
                    console.log(fileList)
                    for (let i in fileList) {
                        let reader = new FileReader()
                        reader.readAsDataURL(fileList[i])
                        reader.onloadend = function () {
                            let base64 = reader.result // base64就是图片的转换的结果
                            console.log(base64)
                            console.log(_this.dataURLtoBlob(base64))
                            _this.upload(_this.dataURLtoBlob(base64)) // 多文件循环上传
                           }
                       }
                   }
               }
            },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容