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);
}
};
},
功能就是这些代码啦,自己写的这个上传功能但是可能会比较繁琐