uni-app上传图片视频音频

海边一草

在写上传的功能时候，发现uni.choosefile上传文件不支持app，所以就自己写了一个上传的方法。、

 

 

 

 首先写了一个上传文件的组件。、，用input写成的。

<view class="content" style="opacity: 0; position: absolute; bottom: 0; width: 0rem; height: 0rem;" >    
<view ref="input"  class="input">  </view>      
</view>

然后写他的事件：

mounted() {  
    var input = document.createElement('input')  
    input.type = 'file' ; 
    input.id="fileuplaod";
    input.onchange = (e) => {
    this._choose_file(input,e);
    }  
    this.$refs.input.$el.appendChild(input) 
    }  ,
    
methods: {
    _createfile(e){
    let domobj=document.getElementById("fileuplaod");
    domobj.click();            
    },
    _choose_file(a,b){
    this.$emit("afterchose",a.files);
    //console.log(a,b)
    }

    }

然后在页面上进行引用。

 <fileupload ref="fileupload" @afterchose="_afterchose" >
 </fileupload>  

对应的事件

_afterchose(e){
    let that=this;
        var file = document.querySelector('input[type=file]').files[0];
    this.uploadType=e[0].type;
    var reader = new FileReader();
     reader.onloadend = function () {
    console.log("展示的数据"，file)}
     if (file) {
    reader.readAsDataURL(file);
}},

这个时候已经拿到了上传的文件地址。

接着就是把拿到的地址展示到页面上面，然后对不同的文件进行不同的组件名称。

<view class="content">
<fileupload ref="fileupload" @afterchose="_afterchose" ></fileupload> //上传的组件 
<view class="datalists"  v-for="(item,index) in datalist" :key="index">
<image v-if="item.type=='image/png'||item.type=='image/jpeg'"  class="image1" :src="item.srcs"> //当是图片的时候展示     
<video :poster="poster2" class="image1" :src="item.srcs" controlsv-if="item.type=='video/mp4'||item.type=='video/x-ms-wmv'"> //当是视频的时候显示 
</video>                                            
<audio :poster="poster1" v-if="item.type=='audio/mp3'" :src="item.srcs"  controls></audio> //当是音频的时候显示
</view>
<view class="uplode" @click="uploadfile()">+</view></view>  //上传点击事件

最后对事件和js处理

//上传的点击事件
uploadfile(){
this.$refs.fileupload._createfile();
},

data(){
return:{
datalist:[],  //data建立一个空的数组
}

//展示图片事件
 _afterchose(e){
       let that=this;
      var file = document.querySelector('input[type=file]').files[0]; //上传的文件地址路径
      this.uploadType=e[0].type;  //判断当前上传文件的类型
      var reader = new FileReader();
      reader.onloadend = function () {
      let fileParam = {
      size:e[0].size, //上传的文件大小
      type:e[0].type,  //上传的文件类型
      srcs:reader.result
     };
      that.datalist.push(fileParam)
      }
       if (file) {
      eader.readAsDataURL(file);
                }
                },

 

最后就写好了。css样式就不写了。

 

 

如果需要多文件上传，改两个地方就好啦，

组价的mounted:

mounted() {  
            var input = document.createElement('input')  
            input.type = 'file' ; 
            input.multiple="multiple";    //加上多文件上传的属性
            input.id="fileuplaod";
            input.onchange = (e) => {
                this._choose_file(input,e);
            }  
            this.$refs.input.$el.appendChild(input) 
        }  ,

然后对获取文件的事件，进行一个循环取值：

        _afterchose(e){
           let that=this;
           var file;    
           let filelist=document.querySelector('input[type=file]').files
           for(let i=0;i< filelist.length;i++){                               
           file = filelist;
           console.log("上传的文件",file)        
           this.uploadType=e.type;
           var reader = new FileReader();
           reader.onloadend = function (obj) {
           let fileParam = {
               name:file.name,
               size:file.size,
               type:file.type,
               srcs:obj.target.result
                            };
                that.datalist.push(fileParam)
                 console.log("现在的"+ JSON.stringify(that.datalist))
             }
               if (file) {                    
                    reader.readAsDataURL(file);
                           }
                 }
                                 
                      },

这样子就ok了

来源：https://www.cnblogs.com/lovebear123/p/14134474.html