一开始想用现成组件uView的u-upload来实现，做到一半发现使用这个组件上传图片没有问题，可以满足从相册上传、直接拍摄、预览功能。但是，视频好像不支持预览，不知道是我写法不对还是怎么回事/(ㄒoㄒ)/~~
最终图片使用的u-upload组件，视频用了uniapp API 的 uni.chooseVideo()方法
一、上传或拍摄图片
<!-- 图片 -->
<view class="up-img">
<view class="up-label">图片：</view>
<u-upload :fileList="imgList" @afterRead="imgRead" @delete="deletePic" name="1" multiple :previewFullImage="true">
</u-upload>
</view> // 新增图片
async imgRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file);
let fileListLen = this.imgList.length;
lists.map((item) => {
this.imgList.push({
...item,
status: 'uploading',
message: '上传中'
})
});
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadImg(lists[i], i);
let item = this.imgList[fileListLen];
this.imgList.splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
accessoryUrl: result
}));
fileListLen++;
}
},
// 上传图片
uploadImg(item, index) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: baseUrl + `/md/quality/upload`, //需要传图片的后台接口
filePath: item.url, // 上传图片 通过uni-app的uni-file-picker组件 函数返回
name: 'file', //文件名字
header: {
'Authorization': "Bearer " + getToken(), //token
},
formData: {
type: Object,
default () {
return {
file: item.name
};
}
},
success: res => {
let result = JSON.parse(res.data);
setTimeout(() => {
resolve(result.accessoryUrl)
}, 1000)
},
fail: e => {
console.log(e)
}
});
});
},
// 删除图片
deletePic(event) {
this.imgList.splice(event.index, 1);
}二、上传或拍摄视频
需要用到uni.chooseVideo 和 uni.uploadFile
详细用法参考
uni.chooseVideo(OBJECT) | uni-app官网
uni.uploadFile(OBJECT) | uni-app官网
<!-- 视频 -->
<view class="up-video">
<view class="up-label">视频：</view>
<view class="up-video-box">
<view class="v-box" v-show="videoList.length" v-for="(item,i) in videoList" :key="i">
<view class="v-inner">
<video style="width: 172px;height: 72px;" :src="item.accessoryUrl"></video>
</view>
<view class="c-icon">
<u-icon @click="deleteVideo(i)" name="close" color="#fff" size="8"></u-icon>
</view>
</view>
<view class="box-s" @click="videoRead">
<u-icon name="camera-fill" color="#d3d4d6" size="26"></u-icon>
</view>
</view>
<!-- <u-upload :fileList="videoList" @afterRead="videoRead" @delete="deleteVideo" name="2" multiple
:previewFullImage="true" accept="video"></u-upload> -->
</view> videoRead() {
let that = this;
let arr = [];
let strPath = "";
uni.chooseVideo({
sourceType: ['camera', 'album'],
success: function (res) {
arr = res.tempFilePath.split("/");
strPath = arr[arr.length - 1];
that.videoList.push({
accessoryUrl: res.tempFilePath,
videoName: strPath
});
that.addUpload([{
accessoryUrl: res.tempFilePath,
videoName: strPath
}]);
}
});
},
//文件提交上传
addUpload(videoArr) {
if (videoArr.length) {
videoArr.forEach(item => { //这里之所以循环一个一个上传是因为，我是用于小程序端的，目前uniapp不支持微信小程序以文件列表形式上传，
uni.uploadFile({
url: baseUrl + `/md/quality/uploadVideo`, //需要传图片的后台接口
filePath: item.accessoryUrl, // 上传图片 通过uni-app的uni-file-picker组件 函数返回
name: 'file', //文件名字
header: {
'Authorization': "Bearer " + getToken(), //token
},
formData: {
type: Object,
default () {
return {
file: item.videoName
};
}
},
success: res => {
let result = JSON.parse(res.data);
this.videoList.map(v => {
if(v.videoName === item.videoName) {
v["accessoryUrl"] = result.accessoryUrl;
}
});
},
fail: e => {
console.log(e)
}
});
});
}
},
deleteVideo(index) {
this.videoList.splice(index, 1);
} .up-video {
display: flex;
.up-video-box {
width: calc(100% - 105px);
display: flex;
flex-wrap: wrap;
.v-box {
width: 185px;
height: 82px;
position: relative;
overflow: hidden;
margin: 0 8px 8px 0;
padding: 10px 10px 0px 0px;
box-sizing: border-box;
background: #010101;
.v-inner {
position: absolute;
bottom: 0px;
left: 0px;
}
.c-icon {
position: absolute;
top: -7px;
right: -7px;
background: #373737;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
padding: 6px 6px 0px 0px;
box-sizing: border-box;
}
}
.box-s {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
background-color: #f4f5f7;
border-radius: 2px;
margin: 0 8px 8px 0;
box-sizing: border-box;
}
}
}tips: 代码里的baseUrl 是服务器地址 ip+端口完整地址， getToken()是获取token方法
三、效果展示
文章来源：https://www.toymoban.com/news/detail-776729.html
这世界很喧嚣，做你自己就好文章来源地址https://www.toymoban.com/news/detail-776729.html
到了这里，关于uniapp上传手机相册图片、视频或拍摄图片、视频上传的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
