文件上传web端和uinapp之间的相互转化

最新推荐文章于 2024-01-06 19:47:16 发布

原创最新推荐文章于 2024-01-06 19:47:16 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

uni-app 专栏收录该内容

1 篇文章

订阅专栏

文章讲述了在web端使用FormData和axios上传文件至minio集群的步骤，以及在uni-app中如何利用uni.uploadFile或基于axios的封装进行文件上传。同时提到了上传过程中的参数如path和token的处理。

web端

web端文件上传最原始的方法，就是创建FormData对象，在创建的对象里添加属性以及要上传的文件，可以直接使用axios进行上传，上传到后端的minio集群里（个例）。

          let fileData = new FormData();
          fileData.append('file', file);
          fileData.append('path', '/private/' + msgId + '/' + timestamp);
          axios.post(url, fileData).then(res => {
          //上传成功后你要执行的操作
          }).catch(function (error) {
          //上传失败进行的操作
          //比如你所上传的minio集群所分配的存储空间满了
          });

uni-app

我们知道，uniapp和vue很像，像但又不完全像，再uniapp里官方提供的有单独上传文件的api，uni.uploadFile用来上传uniapp的各种文件，不过也能使用axios，想使用axios的话需要基于uni.request再进行封装。

uni.uploadFile({
				url:url,
				file:file, // filePathfile和filefilePath二选一，file放文件流，filefilePath放文件路径
				// name:file.name, // 在FormData 中文件对应的属性名，这个如果你要加path，就不要添加name字段了
				formData: {
					path:'/group/' + msgId + '/' + timestamp//用来添加除上述字段以外的字段
				},
				header: {
					token:token
				},
			  		success: (uploadFileRes) => {
			  		//上传成功后的回调
			  		}
			  		fail:(err)=>{
			  		//上传失败执行的操作
			  		}
			  		});