uinapp上传图片API-上传多图,上传单图

data参数 

[
    "blob:http://localhost:5173/c8c38a2d-0a8a-44e9-83d5-1292416f952e"
]
 上传单个图片使用--filePath
/** 上传图片  */
	const handleTakePhoto=(data)=> {
		console.log(data)
		uni.uploadFile({
			// url: 'http://test_2022.yunjiwan.com//revision_android/PostMessage/uploadFiles', //仅为示例,非真实的接口地址
			url: 'http://test_2022.yunjiwan.com/api_android/Index/saveImgs', 
			filePath: data[0],
			name: 'images',
			formData: {
				tofrom: 'jisu'
			},
			success: (res) => {
				lists[0].img=JSON.parse(res.data).data
				form.figureurl=JSON.parse(res.data).data
				changeInfo(form)
				uni.showToast({
					title: '上传图片成功',
					duration: 2000
				});
				showActionSheet2.show = false
			}
		})
	}
 上传多个图片使用--files

const handleTakePhoto=(data)=> {
        console.log(data)
        const files = data;//重点代码
        let imgArr = [];
        for (let i = 0; i < files.length; i++) {
            let obj = new Object();
            obj.name = 'files' + i;
            obj.uri = files[i];
            imgArr.push(obj);
        }

        console.log(imgArr,'imgArr')
        uni.uploadFile({
            url: 'http://test_XXXX.com//uploadFiles', 
            files: imgArr,
            // formData: {//设置其他参数
            //     files: data
            // },
            header: {//请求头配置
                'accesscode': uni.getStorageSync('code'),
                'accesstoken': uni.getStorageSync('token')
            },
            success: (res) => {
                console.log(JSON.parse(res.data))
                uni.showToast({
                    title: '上传图片成功',
                    duration: 2000
                });
            }
        })
    } 

接口参数如下,后台改一下接受参数就可以使用了

请求成功预览

 

 

上传照片调用摄像头或相册api

 h5无法直接调用相册会弹出切换选项

app可以直接打开相册

 

 

if(e.index==0){
	uni.chooseImage({
		count: 1, //默认9
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
		sourceType: ['camera'], //摄像
		success: function (res) {
			handleTakePhoto(res.tempFilePaths)
			// console.log(res)
		}
	})
}else{
	// console.log('点击第二个')
	uni.chooseImage({
		count: 1, //默认9
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
		sourceType: ['album'], //从相册选择
		success: function (res) {
			handleTakePhoto(res.tempFilePaths)
			// console.log(res)
		}
	})
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,以下是基于Vue 2和Vant 2的附件上传示例,可以实现上传单个或多个文件,并调用接口进行文件上传的代码: 1. 安装Vant和axios: ``` npm install vant axios --save ``` 2. 在Vue项目中引入Vant和axios: ``` import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; import axios from 'axios'; Vue.use(Vant); Vue.prototype.$axios = axios; ``` 3. 在Vue组件中使用van-uploader组件: ``` <template> <div> <van-uploader v-model="files" :max-count="maxCount" :before-read="beforeRead" :on-remove="onRemove" :on-exceed="onExceed" :preview-options="{closeable: true}" :deletable="deletable" :show-upload="false" > <van-button icon="plus" type="primary">上传附件</van-button> </van-uploader> <van-button type="primary" @click="upload">上传</van-button> </div> </template> <script> export default { data() { return { files: [], // 上传的文件列表 maxCount: 3, // 最大上传数量 deletable: true, // 是否可删除已上传的文件 } }, methods: { beforeRead(file) { // 上传前的处理逻辑,如判断文件大小、类型等 // 返回false阻止上传,返回true执行上传操作 return true; }, onRemove(file, detail) { // 删除已上传的文件 console.log('file', file); console.log('detail', detail); }, onExceed(files, detail) { // 超出最大上传数量时的处理逻辑 console.log('files', files); console.log('detail', detail); }, upload() { // 上传文件 const formData = new FormData(); this.files.forEach(file => { formData.append('file', file.file); }); this.$axios.post('/api/upload', formData).then(res => { console.log('上传成功', res); }).catch(err => { console.log('上传失败', err); }); }, }, } </script> ``` 以上代码中,van-uploader组件的各个属性含义如下: - v-model:绑定上传的文件列表; - :max-count:上传文件数量的最大值; - :before-read:上传前的处理逻辑,返回false阻止上传,返回true执行上传操作; - :on-remove:删除已上传的文件时的处理逻辑; - :on-exceed:超出最大上传数量时的处理逻辑; - :preview-options:文件预览的配置项,如是否可关闭等; - :deletable:是否可删除已上传的文件; - :show-upload:是否显示上传按钮。 在实现文件上传时,我们只需将上传逻辑改为调用接口进行文件上传即可。同时,需要将上传的文件列表转换为FormData格式,以便使用axios进行文件上传。在组件中定义beforeRead、onRemove、onExceed和upload方法,用于上传前的处理逻辑、删除已上传的文件时的处理逻辑、超出最大上传数量时的处理逻辑和文件上传逻辑。在upload方法中,以FormData格式将上传的文件列表作为参数调用接口进行文件上传
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘海583

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值