uniapp使用uView 2.0上传图片视频_uview上传视频

引入上传的接口

	const baseUrl = environment.environment.baseURL
	const uploadUrl = baseUrl + '/api/file/uploadFile'

在data中定义数组

data(){
   return{
        fileList1: [], // 图片列表 本页最多只支持上传 5 张
        videoList2: [], // 视频列表 本页最多只支持上传 1 张      
    }
}

页面中使用

注：multiple：是否开启多选，安卓部分不支持！ 

        maxCount：限制上传数量

<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="5"></u-upload>

对应methods中的方法

fterRead 上传后处理的函数

            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++) {
					this.isShowOverlay = true
					const result = await this.uploadFilePromise(lists[i].url)
					this.isShowOverlay = false
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1,                 
                    Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
 
            uploadFilePromise(url) {
				let token = uni.getStorageSync('token')
 
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uploadUrl,
						filePath: url,
						name: 'file',
						header: {
							'Authorization': token
						}, // 这个头必须加，否则提示无权限
						formData: {
							user: 'test'
						},
						success: (res) => {
							let resData = res.data.data
							let resType = typeof res.data
							if (resType == 'string') {
								resData = JSON.parse(res.data).data
							}
							setTimeout(() => {
								resolve(resData.url)
							}, 1000)
						}
					});
				})
			},

删除上传后的图片的，delete，传递index 回调 event 参数 包含index，file，name

            deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			}

 上传视频，标签体内添加accept="video"

<u-upload :fileList="videoList" @afterRead="afterRead" @delete="deletePic" name="4" multiple :maxCount="1" accept="video"></u-upload>