uniapp使用uviewplus上传图片

一:请求头携带token的上传图片
在这里插入图片描述

<up-upload  :fileList="fileList" @afterRead="afterRead" @delete="deletePic"
					name="3" multiple :maxCount="10" :previewFullImage="true"></up-upload>
let token = uni.getStorageSync('token') //token
	let hearders = {
		//'content-type': 'multipart/form-data',
		'Authorization': 'Bearer ' + token,
	}
	let uploadUrl = "上传url"
	let fileList = ref([])
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
		updateFormFileId()
	};
	// 新增图片
	const afterRead = async (event) => {
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList.value[fileListLen];
			fileList.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
		updateFormFileId()
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: uploadUrl, // 仅为示例,非真实的接口地址
				filePath: url,
				name: 'file',
				formData: {},
				header: hearders,
				success: (res) => {
					let resData = JSON.parse(res.data)
					//form.fileId += resData.data.id + ","
					setTimeout(() => {
						resolve(resData.data.id);
					}, 1000);
				},
			});
		});
	};
	const updateFormFileId = () => {
	  const successIds = fileList.value
	    .filter(item => item.status === 'success' && item.url)
	    .map(item => item.url);
	  form.fileId = successIds.join(',');
	};

唯一的不同可能就是上传成功的处理逻辑了,这里需要调整一下

二:打包需要勾选权限
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值