【uniApp】uni-file-picker 实现文件上传

// templete
<uni-file-picker v-model="fileList" :limit="1" file-mediatype="image" :sourceType="['album', 'camera']" :image-styles="imageStyle" @select="uploadFile" ></uni-file-picker>
export default {
	data() {
		fileList: [],
		imageStyle: {
			"height": 120,	// 边框高度
			"width": 120,	// 边框宽度
			"border":{ // 如果为 Boolean 值,可以控制边框显示与否
				"color":"#eee",		// 边框颜色
				"width":"1px",		// 边框宽度
				"style":"solid" 	// 边框样式
			}
		}
	},
	methods: {
		uploadFile(e){
			this.fileList.push(e.tempFiles[0])
			uni.uploadFile({
			 	url: '/addFile', // 替换为你的上传API地址
		 	   filePath: e.tempFilePaths[0], // 附件路径
			   name: 'file',
			   formData: {}, // 可加入表单内其他参数
			   success: (res) => { //成功回调
			    const result = JSON.parse(res.data) // 成功回调返回结果
			   },
			   fail: (error) => { //失败回调
			   	console.log(error)
			   }		
			})
		}
	}
}

在这里插入图片描述

相关推荐

  1. flutter file_picker dio web端记录

    2024-07-14 02:50:02       53 阅读
  2. Axios 中的文件(Upload File)方法

    2024-07-14 02:50:02       41 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-14 02:50:02       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-14 02:50:02       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-14 02:50:02       58 阅读
  4. Python语言-面向对象

    2024-07-14 02:50:02       69 阅读

热门阅读

  1. python 快速创建http服务

    2024-07-14 02:50:02       19 阅读
  2. 【Golang】使用go mod vendor的情况

    2024-07-14 02:50:02       21 阅读
  3. 单例模式场景模拟和问题解决

    2024-07-14 02:50:02       21 阅读
  4. IOS-Share Extension

    2024-07-14 02:50:02       15 阅读
  5. Android系统实现多网共存且能独立上外网

    2024-07-14 02:50:02       20 阅读