input type=“file“實現上傳視訊/圖片
阿新 • • 發佈:2021-03-17
html:
<p style="padding-left: 11px"> 上傳圖片/視訊<span style="font-size: 14px; color: #999"> ( 限制最大500M )</span > </p> <div class="head-img" id="video"> <div v-for="(item, index) in videoSrc" :key="index" v-show="vshow == true" style="display: inline; position: relative" > <van-icon @click="delv(index, item.links, 'video')" name="close" /> <video style="width: 80px; height: 80px" :src="item.link" controls="controls" width="500" height="400" ></video> </div> <div v-for="(item, nn) in imgSrc" :key="nn" v-show="ishow == true" style="display: inline; position: relative" > <van-icon @click="delv(nn, item.links, 'img')" name="close" /> <img @click="HandleclickImg(nn)" style="width: 80px; height: 80px" :src="item.link" controls="controls" width="500" height="400" /> </div> <img style=" width: 80px; height: 80px; margin-left: 6px; margin-right: 10px; " src="../../../static/ship.png" id="my-img" /> <input type="file" @change="getBigectURL($event)" id="img-upload" /> </div>
方法:
getBigectURL(event) { var files = ""; var data = new FormData(); $.each($("#img-upload")[0].files, function (i, file) { files = file; data.append("file", file); }); var path = ""; $.ajax({ type: "POST", url: "···········url···········", data: data, cache: false, async: false, contentType: false, //不可缺 processData: false, //不可缺 dataType: "json", success: function (data) { if (data.status) { path = data.path; } }, error: function (data) { console.log(data.status); }, }); this.bb.push(path); var current = event.target.files[0]; var fileReader = new FileReader(); fileReader.readAsDataURL(current); var that = this; fileReader.onload = function (e) { var link = e.currentTarget.result; if (files.type == "video/mp4") { console.log("video/mp4"); that.vshow = true; that.videoSrc.push({ link: link, links: path }); console.log(that.videoSrc); } else if (files.type == "image/jpeg") { that.ishow = true; that.imgSrc.push({ link: link, links: path }); console.log(that.imgSrc); } }; },
功能就是這些程式碼啦,自己寫的這個上傳功能但是可能會比較繁瑣