JS本地读取图片，使用formData方式上传图片总结

最新推荐文章于 2024-08-02 15:46:55 发布

呼啦啦画酱

最新推荐文章于 2024-08-02 15:46:55 发布

阅读量3k

点赞数

分类专栏：总结文章标签： js formdata ajax 图片上传

本文链接：https://blog.csdn.net/qq_42484025/article/details/93845482

版权

总结专栏收录该内容

23 篇文章 0 订阅

订阅专栏

html部分

<input style="position: absolute;width: 100%; height: 100%; opacity:0;float: right;" type="file"
						   accept="image/*"
						   @change="imgsel('2')" />

JS部分：

imgsel（str）{
				//从相册选择照片
				let file = event.target.files[0];
				if(file.size>100000){
					console.log(file.size);
				}
				let reader = new FileReader();
				if(file == null || file == ''){
					alert("请重新选择图片！");
				}
				reader.readAsDataURL(file);
				var formData = new FormData();
				formData.append('pic'+str, event.target.files[0]); // 文件数据
				//其他的参数按需添加
				formData.append('picIdx', str);
				$$.ajax({
						url: "",
						method: "POST",
						timeout: 1000*60*3,
						cache: false,
						crossDomain: true,
						async: false,
						contentType: "multipart/form-data",
						data:formData,
						success: function(data, status, xhr) {
						     alert("图片上传OK");
						},
						error: function(xhr, status) {
							alert("图片上传失败");
						}
					})
}

方法支持选取一张图片或者调用相机进行拍摄图片