【uniapp upload】 上传图片和视频

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>