美文网首页
文件上传

文件上传

作者: 不要和我名字一样 | 来源:发表于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