美文网首页
文件上传

文件上传

作者: 不要和我名字一样 | 来源:发表于2018-11-13 10:38 被阅读30次

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)) // 多文件循环上传
                           }
                       }
                   }
               }
            },

相关文章

网友评论

      本文标题:文件上传

      本文链接:https://www.haomeiwen.com/subject/hhykfqtx.html