uni-app上传图片视频音频

海边一草 發表於 2020-12-14 17:36:00

在写上传的功能时候，发现uni.choosefile上传文件不支持app，所以就自己写了一个上传的方法。、
<img src="https://img2020.cnblogs.com/blog/1728151/202012/1728151-20201214171338994-85015110.png">
 
 
 
 首先写了一个上传文件的组件。、，用input写成的。
<div class="cnblogs_code">
<pre><view class="content" style="opacity: 0; position: absolute; bottom: 0; width: 0rem; height: 0rem;" >
<view ref="input"class="input"></view>
</view></pre>
</div>
然后写他的事件：
<div class="cnblogs_code">
<pre>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)
 }

}</pre>
</div>
然后在页面上进行引用。
<div class="cnblogs_code">
<pre> <fileupload ref="fileupload" @afterchose="_afterchose" >
</fileupload></pre>
</div>
对应的事件
<div class="cnblogs_code">
<pre>_afterchose(e){
let that=this;
 var file = document.querySelector('input').files[0];
this.uploadType=e[0].type;
var reader = new FileReader();
reader.onloadend = function () {
console.log("展示的数据"，file)}
if (file) {
reader.readAsDataURL(file);
}},</pre>
</div>
这个时候已经拿到了上传的文件地址。
接着就是把拿到的地址展示到页面上面，然后对不同的文件进行不同的组件名称。
<div class="cnblogs_code">
<pre><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>//上传点击事件</pre>
</div>
最后对事件和js处理
<div class="cnblogs_code">
<pre>//上传的点击事件 uploadfile(){
this.$refs.fileupload._createfile();
},</pre>
</div>
<div class="cnblogs_code">
<pre>data(){ return:{ datalist:[],//data建立一个空的数组 } //展示图片事件 _afterchose(e){
 let that=this;
 var file = document.querySelector('input').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);
 }
 },</pre>
</div>
 
最后就写好了。css样式就不写了。
 
 
如果需要多文件上传，改两个地方就好啦，
组价的mounted:
<div class="cnblogs_code">
<pre>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)
 },</pre>
</div>
然后对获取文件的事件，进行一个循环取值：
<div class="cnblogs_code">
<pre> _afterchose(e){
 let that=this;
 var file;
 let filelist=document.querySelector('input').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);
 }
 }

 },</pre>
</div>
这样子就ok了 
来源：https://www.cnblogs.com/lovebear123/p/14134474.html

頁: [1]

琼殿技术论坛's Archiver

uni-app上传图片视频音频