【uniapp upload】上传图片和视频-Toy模板网

这篇具有很好参考价值的文章主要介绍了【uniapp upload】上传图片和视频。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【uniapp upload】上传图片和视频,uni-app 文章来源地址https://www.toymoban.com/news/detail-639410.html

template

<view class="u-f wrap">
			
					<u-upload
						accept='image'
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						multiple
						name="1"
						width="160rpx"
						height="160rpx"
					>
					<image src="@/static/img/upload1.png" 
						mode="" style="width: 160rpx;height: 160rpx;"></image>
					</u-upload>
				</view>
				<view class="u-f wrap">
		
					<u-upload
					:fileList="fileList2"
						@afterRead="afterRead"
						@delete="deletePic"
						name="2"
						multiple
						accept="video"
						width="160rpx"
						height="160rpx"
					>
					<image src="@/static/img/upload2.png"
						mode="" style="width: 160rpx;height: 160rpx;"></image>
					</u-upload>
				</view>

script

<script>
export default {
	data() {
			return {
				
				fileList1: [],
				fileList2:[],
			
			}
		},
		methods:{
			// 新增图片
			async afterRead(event){
					// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
					let lists = [].concat(event.file)
					let fileListLen = this[`fileList${event.name}`].length
					lists.map((item) => {
						this[`fileList${event.name}`].push({
							...item,
							status: 'uploading',
							message: '上传中'
						})
					})
					for (let i = 0; i < lists.length; i++) {
						const result = await this.uploadFilePromise(lists[i].url,event.name)
						let item = this[`fileList${event.name}`][fileListLen]
						this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						}))
						fileListLen++
					}
			},
	
			deletePic(event){
				this[`fileList${event.name}`].splice(event.index, 1);
			},
		
			uploadFilePromise(url,num) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseUrl + 'oss/upload', 
						filePath: url,
						name: 'file',
						formData: {},
						success: (res) => {
							res.data = JSON.parse(res.data);
							if (res.data.status == 111111) {
								setTimeout(() => {
									resolve(res.data.data[0].url)
								}, 1000)
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								});
								this[`fileList${num}`].pop();
								return
							}
						},
						fail: (error) => {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
							reject(error)
						}
					});
				})
			},
			// 预览图片
			previewFun(num,list){
				let that = this;
				uni.previewImage({
					current:num,
					urls: list,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		}
}
</script>

css

<style lang='scss'>

	video{
		width: 210rpx;
		height: 210rpx;
		margin-bottom: 20rpx;
		margin-right: 30rpx;
		border-radius: 8rpx;
	}
	video:nth-child(3n){
		margin-right: 0rpx;
	}
</style>