<template>
<view>
<!-- 上传视频 -->
<view v-if="url === 'vedio'">
<view class="content" @tap="testVedio" v-if="!isVedio">
<view class="add"> + </view>
<view class="add_text"> 添加视频 </view>
</view>
<view v-else class="vedio_again">
<video :src="src" class="vedio"></video>
<view class="again" @click="reUpload"> 重新上传 </view>
</view>
</view>
<!-- 上传图片 -->
<view v-if="url === 'images'" class="imagesList">
<view class="father" v-for="(item, index) in imagesList" :key="index">
<span class="son" @click="deleteImage(index)">X</span>
<image @click="preview(imagesList)" class="images" :src="item"></image>
</view>
<view class="content" @tap="testImages" v-show="updateImagesNum !== 0">
<view class="add"> + </view>
<view class="add_text"> 添加图片 </view>
</view>
</view>
<!-- 上传文件 -->
<view v-if="url === 'file'" class="container">
<view>
<uniFilePicker
v-model="imageValue"
limit="5"
:auto-upload="false"
@select="selectFile"
@delete="deleteFile"
file-mediatype="all"
title="最多选择5个文件"
></uniFilePicker>
</view>
</view>
</view>
</template>
<script>
import uniFilePicker from "./uni-file-picker/uni-file-picker.vue";
export default {
//属性
props: {
url: {
type: String,
default: "",
},
},
data() {
return {
src: "",
isVedio: false,
// 预留回显示
imageValue:[
// 需要带上name字段才会显示上传的文件名
// {
// url: '',
// extname: 'png',
// name: 'shuijiao.png'
// }, {
// url: '',
// extname: 'png',
// name: 'uniapp-logo.png'
// }, {
// url: '',
// extname: 'png',
// name: 'shuijiao.png'
// }
],
vedioUrl: "",
updateImagesNum: 3,
imagesList: [],
globalData: getApp().globalData,
};
},
components: {
uniFilePicker,
},
methods: {
// 上传视频
testVedio: function () {
var self = this;
uni.chooseVideo({
maxDuration: 30,
sourceType: ["camera", "album"],
success: (responent) => {
const MB = this.getfilesize(responent.size);
if (parseFloat(MB) > 8 && MB.indexOf("KB") === -1) {
uni.showToast({
title: "上传的视频不能大于8M",
duration: 2000,
icon: "none",
});
return;
}
self.src = responent.tempFilePath;
self.isVedio = true;
let videoFile = responent.tempFilePath;
uni.showLoading({
title: "上传中...",
});
uni.uploadFile({
url: self.globalData.url + "/" + this.url,
method: "POST",
fileType: "vedio",
header: {
"Content-Type": "multipart/form-data",
"Dos-Requested-With": "XMLHttpRequestXcx",
"Access-Token": uni.getStorageSync("token"),
},
formData: {
updaldVideo: videoFile,
},
filePath: videoFile,
name: "updaldVideo",
success: (res) => {
uni.hideLoading();
const str = JSON.parse(res.data);
self.vedioUrl = str.result;
},
});
},
});
},
// 上传图片
testImages: function () {
var self = this;
// 从相册选择6张图
uni.chooseImage({
count: self.updateImagesNum,
sizeType: ["original", "compressed"],
sourceType: ["album"],
success: function (res) {
self.imagesList.push(...res.tempFilePaths);
/*
uni.uploadFile({
url: data.url, //从调用页面传入 -- url: 'http://127.0.0.1:3000/' 后端接口地址
filePath: data.path[i], //从调用页面传入 --path: imgbox, 选取图片的地址数组
name: "img", //文件名称可以自定义，要与后端配对使用：app.post('/',upload.single('img'),function(req,res,next)
formData: {
//这里是上传图片时一起上传的数据
user: data.user,
memo: data.text, //从调用页面传入 -- text:text1 文本框内容
},
success: (resp) => {
success++; //图片上传成功，图片上传成功的变量+1
//console.log(resp.data) //在调试窗口显示后端返回的图片名称
imgurln = imgurln.concat(app.globalData.url + resp.data); //以图片名称拼接成网址，并追加到数组imgurln
},
fail: (res) => {
//失败
fail++; //图片上传失败，图片上传失败的变量+1
console.log("fail:" + i + "fail:" + fail);
},
complete: () => {
//不论成功、失败都执行
i++; //这个图片执行完上传后，开始上传下一张
if (i == data.path.length) {
//当图片传完时，停止调用
console.log("1>" + app.globalData.url);
console.log("执行完毕");
console.log("成功：" + success + " 失败：" + fail);
} else {
//若图片还没有传完，则继续调用函数
//console.log(i);
data.i = i;
data.success = success;
data.fail = fail;
that.uploadimg(data);
}
},
});
*/
},
});
},
// 预览图片
preview(data) {
uni.previewImage({
urls: data,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function (data) {
console.log(
"选中了第" +
(data.tapIndex + 1) +
"个按钮,第" +
(data.index + 1) +
"张图片"
);
},
fail: function (err) {
console.log(err.errMsg);
},
},
});
},
// 移除图片
deleteImage(subscript) {
uni.showModal({
title: "提示",
content: "确认要删除该项吗？",
success: (res) => {
if (res.confirm) {
this.imagesList = this.imagesList.filter((v, index) => {
return subscript !== index;
});
} else {
console.log("点击了取消");
}
},
});
},
//把字节转换成正常文件大小
getfilesize(size) {
if (!size) return "";
var num = 1024.0; //byte
if (size < num) return size + "B";
if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + "KB"; //kb
if (size < Math.pow(num, 3))
return (size / Math.pow(num, 2)).toFixed(2) + "MB"; //M
if (size < Math.pow(num, 4))
return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
},
// 重新选择视频/默认上传一个
reUpload() {
this.isVedio = false;
},
// 获取上传文件
selectFile(e) {
console.log(e,'选择上传的文件');
},
// 移除上传文件
deleteFile(e) {
console.log(e,'移除上传文件');
},
},
// uniapp中子组件没有onload和onshow方法,使用mounted
mounted() {
// 预留图片视频回显功能
},
watch: {
// 根据设置图片的最大数量实时修改上传图片的数量(此处最大上传3张)
imagesList(val) {
if (val.length === 1) this.updateImagesNum = 2;
else if (val.length === 2) this.updateImagesNum = 1;
else if (val.length === 3) this.updateImagesNum = 0;
else if (val.length === 0) this.updateImagesNum = 3;
console.log(this.updateImagesNum, "self.updateImagesNum");
},
},
};
</script>
<style>
.content {
width: 80px;
height: 80px;
border-radius: 5px;
margin-left: 5px;
display: flex;
justify-content: center;
cursor: pointer;
background-color: rgb(244, 245, 246);
}
.add {
text-align: center;
font-size: 30px;
line-height: 40px;
position: absolute;
color: #606266;
margin-top: 10px;
}
.add_text {
position: absolute;
margin-top: 40px;
font-size: 14px;
}
.vedio {
width: 80px;
height: 80px;
border-radius: 5px;
margin-left: 5px;
}
.vedio_again {
display: flex;
align-items: center;
}
.again {
padding-left: 30px;
}
.images {
width: 80px;
height: 80px;
border-radius: 5px;
margin-left: 5px;
}
.imagesList {
display: flex;
}
.father {
position: relative;
}
.son {
width: 20px;
height: 20px;
color: white;
text-align: center;
line-height: 20px;
border-radius: 50%;
background: #fa3534;
position: absolute;
left: 60px;
top: 5px;
z-index: 9;
}
</style>
1.通过v-if传入 vedio/imagw/file来选择需要引入的功能
2.上传文件需要另需引入uni-file-picker
3.ios上传出现打不开资源管理器的情况
解决方法:找到引入的uni-file-picker组件的choose-and-upload-file.js文件,找到 chooseAndUploadFile方法，在方法里添加下面代码
